PDA

Click to See Complete Forum and Search --> : div positioning

Inga.
12-06-2008, 05:28 PM
I've created a layout with two main layers that site side by side in the main container (I sort of copied from a default DW template since I never made a site in layers before). I have a background image in the main container that I want to continue to run down the page until the footer and I want space between the two main layers that stand side by side. So, I made another div called #space and placed it after the second main content layer but before the footer.

However, the #space div is sitting only under my right main content div and not under the left one. I'm not sure what I've done wrong here. I will show the code below and perhaps someone can point out the error of my ways?

Leftside layer
.twoColHybLtHdr #sidebar1 {
float: left;
width: 290px;
padding: 0px 0;
margin: 30px 0 0 80px;
text-align:left;
vertical-align:top;
min-height:640px;
max-height:780px;
}

Rightside layer
.twoColHybLtHdr #maincontent {
width: 525px;
margin: 30px 20px 0 400px;
text-align:left;
vertical-align:top;
min-height: 640px;
max-height: 780px;
}

Spacer layer
.twoColHybLtHdr #space {
text-align:left;
vertical-align:top;
padding: 0 0;
height:30px;
}

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

And the code on the page minus the text
<div id="sidebar1">
some content
</div>
<div id="maincontent">
some content
</div>
<div id="space"></div>
<br class="clearfloat" />
Fang
12-08-2008, 09:22 AM
Floating both containers should give the required result:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>layout</title>

<style type="text/css">
.twoColHybLtHdr #sidebar1 {background:#9cf;
float: left;
width: 290px;
padding: 0px 0;
margin: 30px 80px 0 80px;
text-align:left;
vertical-align:top;
min-height:640px;
max-height:780px;
}
.twoColHybLtHdr #maincontent {background:#900;
width: 525px;float: left;
margin: 30px 20px 0 0;
text-align:left;
vertical-align:top;
min-height: 640px;
max-height: 780px;
}
.twoColHybLtHdr #space {background:#ffc;
text-align:left;
vertical-align:top;
height:30px;
clear:both;
}
</style>

</head>
<body>
<div class="twoColHybLtHdr">
<div id="sidebar1">some content</div>
<div id="maincontent">some content</div>
<div id="space">space</div>
</div>
</body>
</html>
Inga.
12-09-2008, 02:09 AM
thank you- I appreciate it. I'll try that out.