No hair!! Simple Box Model

cc4digital

06-03-2010, 09:30 PM

Ok, I stripped every bit of code from my web page to bring it to the basics. Although at the basics I still do not see what the problem is. What am I missing here?

I have put a border on all div tags for clarity. Below is a picture of what my browser is showing.

Issue: My yellow and red div will not wrap around the pink and green div.
In short, I am trying to put 2 wrappers around two div tags.:rolleyes:

Any help on this simple box issue would be much appreciated while I still have a few strands of hair left.:p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Educational Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
body {
font: 90%/1 arial, helvetica, sans-serif;
background:#333;
line-height: 130%;
width: 100%;
min-width: 970px;
}
/******WRAPPERl ******/
#wrapper {
width: 960px;/* The width of the background image needs to be 906px */
margin: 0 auto;/* center the page in Firefox */
text-align: left;
position: relative;
z-index: 2;
border: 4px solid yellow
}
/***** CONTENT WRAPPER *****/
#contentwrapper {
height:4px;
border:5px solid red;
}
/******CONTENT ******/
#content {
float: left;
width: 70%; /*635*/
border: 4px solid pink;
background:#999;
}
/***** SIDEBAR *****/
#sidebar {
float: left;
width: 15%; /*255*/
background: #E1E0EF;
border: 4px solid green;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="contentwrapper">
<div id="content">
<h1>asdfasdfasdf</h1>
<h1>asdfasdfasdf</h1>
<h1>asdfasdfasdf</h1>
<h1> </h1>
</div>

<div id="sidebar">
<h2>asdfasdfasdf</h2>
<h2>asdfasdfa</h2>
<h2>asdfasdf</h2>
<h2></h2>
</div>
</div> 
</div> 

</body>
</html>

Scriptet

06-03-2010, 10:25 PM

Funny i've just been discussing this problem in another topic see here: http://codingforums.com/showthread.php?t=197440

Basically you need to add overflow:auto; to your wrapper so that it encloses it's floats!

cc4digital

06-03-2010, 11:00 PM

Scriptet: Almost!

I haven't dealt with this issue before or for that matter seen this solution. Good stuff:thumbsup:

Ok, if I put the overflow:auto into the #wrapper (yellow box) it does as you say. It expands out including the pink and green boxs as I want.

Problem--The contentwrapper(red box) does not expand with it. If I put the overflow:auto into the contentwrapper id then the whole thing collapes.

Any idea on how to include the red box in the epansion?

Thanks for the rely and help.
Chuck
p.s Off to read addtional links.

_Aerospace_Eng_

06-03-2010, 11:03 PM

You set a height of 4px on contentwrapper. Lose the height. You actually want overflow:auto; on contentwrapper, not wrapper. Do a search for "how to clear floats".

http://www.quirksmode.org/css/clearing.html

Scriptet

06-03-2010, 11:09 PM

Aero is right...

Think of it this way when children are floated it's as though it's parent doesn't know its there...

So you are floating things inside contentwrapper, but contentwrapper doesn't see them hence it has no height as though nothing is inside it..

However if you add overflow:auto; then it will see the floats and expand to contain them..as a result the overall container will see the height of contentwrapper and also expand without overflow because contentwrapper is not floated.

cc4digital

06-03-2010, 11:35 PM

You set a height of 4px on contentwrapper. Lose the height. You actually want overflow:auto; on contentwrapper, not wrapper.
Ya, that was stupid with the height. But I still have the same problem. Here is the new code that I am using.
:eek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Educational Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
body {
font: 90%/1 arial, helvetica, sans-serif;
background:#333;
line-height: 130%;
width: 100%;
min-width: 970px;
}
/******WRAPPERl ******/
#wrapper {
width: 960px;/* The width of the background image needs to be 906px */
margin: 0 auto;/* center the page in Firefox */
text-align: left;
position: relative;
z-index: 2;
border: 4px solid yellow;
}
/***** CONTENT WRAPPER *****/
#contentwrapper {
border:5px solid red;
autoflow:auto;
}
/******CONTENT ******/
#content {
float: left;
width: 70%; /*635*/
border: 4px solid pink;
background:#999;

}
/***** SIDEBAR *****/
#sidebar {
float: left;
width: 15%; /*255*/
background: #E1E0EF;
border: 4px solid green;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="contentwrapper">
<div id="content">
<h1>asdfasdfasdf</h1>
<h1>asdfasdfasdf</h1>
<h1>asdfasdfasdf</h1>
<h1> </h1>
</div>

<div id="sidebar">
<h2>asdfasdfasdf</h2>
<h2>asdfasdfa</h2>
<h2>asdfasdf</h2>
<h2></h2>
</div>

</div> 
</div> 

</body>
</html>

_Aerospace_Eng_

06-03-2010, 11:36 PM

You have autoflow, not overflow.

cc4digital

06-03-2010, 11:39 PM

I GOT IT

Ya, overflow. STUPID STUPID STUPID

THANKS THANKS THANKS

Scriptet

06-03-2010, 11:45 PM

Any hair left?

cc4digital

06-04-2010, 01:29 AM

Ya, but I no longer need a brush.

Thanks again for all your help. :thumbsup: I would not have figured that one out.

effpeetee

06-04-2010, 10:11 AM

There is a lot of help here (http://www.exitfegs.co.uk/Sources.html).

Frank

Use the Search facility.