Forum Moderators: not2easy
The "wrapper" div centers the layout on the screen and sets its width
The "content" div sets the background and a wide border
I then have two columns to appear within the "content" div, but, adding the float:right to the "right1third" div means that the background and border of the content div do not extend down behind the text in the "left2thirds" and "right1third" divs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="wrapper" style="width: 790px; margin: 0 auto;">
<div id="content" style="border:15px #beb2a8 solid; background-color:#371903; color:red;">
<div id="left2thirds" style="width:510px; float:left;">
<p>this is some text. this is some text. this is some text. this is some text. this is some text. this is some text. this is some text. this is some text. this is some text. this is some text. </p>
</div>
<div id="right1third" style="width: 230px; float:right;">
<h2>Welcome To this test</h2>
<p>This is some text on the right hand column</p>
</div>
</div>
</div>
try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
#wrapper {
width:760px;
margin:auto;border:15px solid #beb2a8;
background-color:#371903;
color:#f00;
}
#wrapper:after {
content:'';
display:block;
clear:both;
}
#left2thirds {
width:510px;
float:left;
}
#right1third {
width: 230px;
float:right;
}
</style></head>
<body><div id="wrapper">
<div id="content">
<div id="left2thirds">
<p>
this is some text. this is some text. this is some text. this is some text. this is some text.
this is some text. this is some text. this is some text. this is some text. this is some text.
</p>
</div><div id="right1third">
<h2>Welcome To this test</h2>
<p>This is some text on the right hand column</p>
</div></div>
</div>
</body>
</html>
Note:- I have left the #content div in the code, but it is really superfluous to requirements. ;)
birdbrain
I'm going to try this out straight away. Thanks again.
No problem, you're very welcome. ;)
I have included the full page this time, incorporating your suggestion:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
#wrapper {width:790px;margin:auto;}
#content { border:15px solid #beb2a8;background-color:#371903;color:#f00;}
#content:after {content:'';display:block;clear:both;}
#left2thirds {width:510px;float:left;}
#right1third {width: 230px;float:right;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
<div id="left2thirds">
<p>
this is some text. this is some text. this is some text. this is some text. this
is some text. this is some text. this is some text. this is some text. this is
some text. this is some text.
</p>
</div>
<div id="right1third">
<h2>Welcome To this test</h2>
<p>This is some text on the right hand column</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I have included the full page this time, incorporating your suggestion:
That is not entirely true.
I removed all the styling from the #content div and applied it to the #wrapper div.
You, in your infinite wisdom, chose to put it all back. ;)
With the inclusion of the #footer div the #wrapper:after now becomes unnecessary as the code will show...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
#wrapper {
width:760px;
margin:auto;border:15px solid #beb2a8;
background-color:#371903;
color:#f00;
}
#left2thirds {
width:510px;
float:left;
}
#right1third {
width: 230px;
float:right;
}
#footer {
text-align:center;
clear:both;
</style></head>
<body><div id="wrapper">
<div id="header">This is the header.</div><div id="menu">this is the menu.</div>
<div id="content">
<div id="left2thirds">
<p>
this is some text. this is some text. this is some text. this is some text. this is some text.
this is some text. this is some text. this is some text. this is some text. this is some text.
</p>
</div><div id="right1third">
<h2>Welcome To this test</h2>
<p>This is some text on the right hand column</p>
</div></div>
<div id="footer">this is the footer which will now clear the floats.</div>
</div></body>
</html>
birdbrain
I don;t want the border to go around the header or the footer. Only the content section needs to have the border and the background.
OK, try version three in that case ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
#wrapper {width:790px;margin:auto;}
#content { border:15px solid #beb2a8;background-color:#371903;color:#f00;}
#left2thirds {width:510px;float:left;}
#right1third {width: 230px;float:right;}
#clear{clear:both;}
</style></head>
<body><div id="wrapper">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">
<div id="left2thirds">
<p>
this is some text. this is some text. this is some text. this is some text. this
is some text. this is some text. this is some text. this is some text. this is
some text. this is some text.
</p>
</div><div id="right1third">
<h2>Welcome To this test</h2>
<p>This is some text on the right hand column</p>
</div><div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
birdbrain
Sorry if I lead you a merry dance by not posting the whole page of code first, I was trying to keep the original post of code short.
It just shows that I fundamentally did not understand the problem or possible solution.
This CSS, sheesh! I'd have it done yesterday using tables!
Thanks and thanks again.
No problem, you're very welcome. ;)
To make the parent extend to encompass its floated children there are a few options: float the parent as well (not always worth the effort as it'll shift the problem to whatever comes after the parent)
Or add something in the parent that stays in the flow and clears the floats (either a <br style="clear:both" /> or the :after you were shown here).
Hope this helps with the understanding.
