CSS problem

Log in to reply
J

JoyDivision

  • #1
    I am having a problem with this website I am working on. I have a main div, a header, a nav bar and underneath that I need two floating columns, I am trying to get them to lign up one to the left, and one to right, I have done float:left; display:inline; and it works but as soon as I use the inline propety the main div no longer uses its auto height properly which results in the main background dispearing unless I fix the height. I don't have any idea what is wrong, I have created this setup lots of times in the past and it has worked flawlessy. Here is the CSS code.

    All the DIV tags in the HTML are in the right place and terminated properly.

    Code: 
    /* CSS Document */


body{
background-color:#99ccff;
}

.main{
width:1024px;

border-width:1px;
border-style:solid;
border-color:black;
margin-left:auto;
margin-right:auto;
background-color:yellow;
height:auto;
overflow:visible;



}

.header{

width:1024px;
height:auto;
	background-image:url('header2.png');
background-repeat:repeat;
text-align:right;
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.1em;
color:black;
background-color:#6699cc;
padding-top:20px;
padding-bottom:40px;




}

.navbar{

	background-image:url('navbar.png');
background-repeat:repeat-x;
width:1024px;
height:auto;


padding-top:10px;
padding-bottom:4px;
color:white;
background-color:#000066;

text-align:center;


}

.bottomnavbar{
	background-image:url('navbar2.png');
background-repeat:repeat-x;
width:1024px;
height:11px;


}

.italics{
font-style:italic;
font-family: Times-New-Roman;
font-weight:bold;
}

.content{
width:950px;
height:auto;
background-color:white;
margin-left:auto;
margin-right:auto;
}

.contentleft{
width:450px;
height:auto;


border-right-style:solid;
border-right-width:1px;
border-right-color:black;
padding-left:20px;
padding-bottom:20px;
padding-right:10px;
margin-bottom:10px;
background-color:red;

float:left;


}


.contentright{
width:150px;
padding:20px;
float:right;
background-color:red;

display:inline;

}

h1{
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.4em;
}
A.navtop:link, A.navtop:visited, A.navtop:Active{




text-decoration:none;
color:white;
text-align:center;
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.1em;
padding-left:10px;
padding-right:10px;

}

  A.navtop:hover{
  background-color:white;
  color:black;
 
  
  }

    Thanks.
     
    Duke Fame

    Duke Fame

    Free Member
    Jan 28, 2008
    1,309
    209
  • #3
    JoyDivision said:
    I am having a problem with this website I am working on. I have a main div, a header, a nav bar and underneath that I need two floating columns, I am trying to get them to lign up one to the left, and one to right, I have done float:left; display:inline; and it works but as soon as I use the inline propety the main div no longer uses its auto height properly which results in the main background dispearing unless I fix the height. I don't have any idea what is wrong, I have created this setup lots of times in the past and it has worked flawlessy. Here is the CSS code.

    All the DIV tags in the HTML are in the right place and terminated properly.

    Code: 
    /* CSS Document */
 
 
body{
background-color:#99ccff;
}
 
.main{
width:1024px;
 
border-width:1px;
border-style:solid;
border-color:black;
margin-left:auto;
margin-right:auto;
background-color:yellow;
height:auto;
overflow:visible;
 
 
 
}
 
.header{
 
width:1024px;
height:auto;
    background-image:url('header2.png');
background-repeat:repeat;
text-align:right;
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.1em;
color:black;
background-color:#6699cc;
padding-top:20px;
padding-bottom:40px;
 
 
 
 
}
 
.navbar{
 
    background-image:url('navbar.png');
background-repeat:repeat-x;
width:1024px;
height:auto;
 
 
padding-top:10px;
padding-bottom:4px;
color:white;
background-color:#000066;
 
text-align:center;
 
 
}
 
.bottomnavbar{
    background-image:url('navbar2.png');
background-repeat:repeat-x;
width:1024px;
height:11px;
 
 
}
 
.italics{
font-style:italic;
font-family: Times-New-Roman;
font-weight:bold;
}
 
.content{
width:950px;
height:auto;
background-color:white;
margin-left:auto;
margin-right:auto;
}
 
.contentleft{
width:450px;
height:auto;
 
 
border-right-style:solid;
border-right-width:1px;
border-right-color:black;
padding-left:20px;
padding-bottom:20px;
padding-right:10px;
margin-bottom:10px;
background-color:red;
 
float:left;
 
 
}
 
 
.contentright{
width:150px;
padding:20px;
float:right;
background-color:red;
 
display:inline;
 
}
 
h1{
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.4em;
}
A.navtop:link, A.navtop:visited, A.navtop:Active{
 
 
 
 
text-decoration:none;
color:white;
text-align:center;
 font-family: verdana, Helvetica, Arial, Sans-Serif;
font-size:1.1em;
padding-left:10px;
padding-right:10px;
 
}
 
  A.navtop:hover{
  background-color:white;
  color:black;
 
 
  }


    Thanks.
    Click to expand...


    I think the solution will be:
    Code: 
    10 PRINT "NUFC are the greatest"
20 GOTO 10
     
    Upvote 0
    M

    mke

  • #5
    JD, try making one div with two columns for the whole page. Then have a div-left or a div-right in one of them. Making a holder with three columns seldom works, just do two and split one of them. There are a number of variations on the theme.

    By the way, soccer dopes on a business forum suck. Any mods around?
     
    Last edited by a moderator:
    Upvote 0
    J

    JoyDivision

  • #6
    Here is the HTML

    Code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>



<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	
	

<title>Home Page</title>

</head>

<body>
<div class="main">

  <div class="header">
<strong>Name of company</strong><br/>
<span class="italics">What ever my company will be called</span><br/>
0161 660 0000<br />
[email protected]


  </div>
       <div class="navbar">
          <a href="index.php" class="navtop">home</a> *
          <a href="index.php" class="navtop">about</a> *
          <a href="index.php" class="navtop">business</a> *
          <a href="index.php" class="navtop">photography</a> *
          <a href="index.php" class="navtop">contact</a>
       
        </div>
<div class="bottomnavbar"></div>
<div class="content">
 
    <div class="contentleft">
    <h1>Main heading</h1>
    Text will go here
    </div>
    <div class="contentright">test</div>
  
   
</div>
</div>
</body>

    As you can see the layout is just a header, two columns and there will be a footer.

    I have done this many times before and its worked perfectly, just can't see what the problem is here but my CSS is a little rusty.
     
    Last edited by a moderator:
    Upvote 0
    J

    JoyDivision

  • #10
    Going to follow MKE's suggestion and just get rid of the two divs, instead just have the right one floating in the main content div, should make the code a lot neater and should make it work too.

    Sorted it now :) The only issue is now I have to have the right div first in the HTML otherwise the right section displays underneath the div and not to the right of it. Is there any round this?
     
    Last edited by a moderator:
    Upvote 0
    J

    JoyDivision

  • #11
    Still having problems :( That method works but if there is more text in the right section it dosn't bring the main div down so it cuts off. I can't believe how tricky this is being, I have done it so many times no problems but I don't want to re-use old code.
     
    Upvote 0
    Log in to reply

    Latest Articles

    Top Bottom
    Community
    Articles
    Menu