PDA

View Full Version : Div layout code question


thedon
12-07-2009, 08:36 AM
Hi,
I have the following code


HTML:
<body>
<div id="header"><img src="images/header.jpg" width="1000" height="150" /></div>
<div id="leftcol"></div>
<div id="content"></div>
<div id="rightcol"></div>
</body>
</html>


My css code:
Body {background:#000000
}
#header {
width: 1000px;
height: 150px
}

#leftcol {
float:left;
background: #575975;
width: 200px;
height: 500px
}
#content {
background: #928FB6;
height: 500px;
width: 800px
}
#rightcol {
background: #575975;
width: 200px;
height: 500px
}

Now I want the the leftcol, container and right col (in that order) to show up next to eachother in columns. But the rightcol is showing under the leftcol
Why is this

Corrosive
12-07-2009, 09:36 AM
Because you haven't floated the content div. Float that left and add a right float to rightcol

edbr
12-07-2009, 09:44 AM
or adding a wrapper div you can float all left

body {background:#000000
}
#header {
width: 1000px;
height: 150px
}
#wrapper{position:relative; width:1002px;}
#leftcol {
float:left;position:relative; background-color: #575975;width: 200px;height: 500px; position:relative;
}
#content {float:left;position:relative;background-color: #928FB6;width: 600px;height: 500px;
}
#rightcol {float:left;position:relative;
background-color: #575975;
width: 200px;
height: 500px;
}


<body>
<div id="wrapper">
<div id="header"><img src="images/header.jpg" width="1000" height="150" /></div>
<div id="leftcol"></div>
<div id="content"></div>
<div id="rightcol"></div>
</div>
</body>
</html>

thedon
12-07-2009, 09:54 AM
Thanks for that