Problem with "wrapper" div.

Hello web developers! :)

I am new to html and css and I have a problem that have been boggling my mind. I hope you guys can help me with this
and perhaps point me at the right direction.

I have been taught to place all my header, footer, divs, images, text etc. in a div called "wrapper".
Example:

HTML Code:

<div id="wrapper"> <header> HEADER </header> <div id="box1"> BOX 1 </div> <div id="box2"> BOX 2 </div> <div id="box3"> BOX 3 </div> <footer> FOOTER </footer> </div>

In order to layout my web page, I need to float box1, box2 and box3. The problem is, when I float all the 3 boxes, the footer will immediately touch my header.

I have been taught to use "overflow:hidden;" on the css for the "wrapper" div, but the footer is still touching.

The ONLY way I can fix this, is to separate my "header" and "footer" divs outside my "wrapper"... but is that considered best practice? I have seen alot of websites having all their divs in a "wrapper" div successfully.

Can anybody explain to me this problem? :/ Below is the CSS I used.

HTML Code:

#wrapper{ width:900px; background-color:red; margin:auto; overflow:hidden; } header{ width:900px; height:300px; background-color:green; } #box1{ width:200px; height:200px; background-color:yellow; float:left; } #box2{ width:200px; height:200px; background-color:white; float:left; } #box3{ width:200px; height:200px; background-color:pink; float:left; } footer{ width:900px; height:100px; background-color:black; }

Another thing, is it okay to have an embedded AND an external css stylesheet when buidling web pages? I prefer to do that. I like to keep the layout
style for each page embedded in the "head" of my web page since the layout are different from each page. And the rest of the styles which affect all the webpages in an external stylesheet. Is that considered best practice or should I dump everything in an external stylesheet?

Thanks in advance for any input you guys. :D

a rough draft

You could try the following. Remember, new HTML5 elements (namely your <header> and <footer>) need to be declared display: block; and browsers may not yet recognize them so it would be better to create #ID divs at this point.

Code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #3FF;} /* remember to set HTML 5 elements display:block: */ #wrapper{ width:900px; background-color:red; margin:auto; overflow:hidden; } .container { width:90%; margin:2px auto; background-color:white; } header{ display: block; margin: 2px auto; width:90%; height:300px; background-color:green; } hr { clear:both;} #box1{ width:30%; height:200px; background-color:yellow; float:left; margin:10px; padding:2px; } #box2{ width:30%; height:200px; background-color:purple; float:left; margin:10px; padding:2px; } #box3{ width:30%; height:200px; background-color:pink; float:left; margin:10px; padding:2px; } footer{ display: block; clear:both; margin: 2px auto; width:90%; height:100px; background-color:black; } </style> </head> <body> <div id="wrapper"> <header> HEADER </header> <div class="container"> <div id="box1"> BOX 1 </div> <div id="box2"> BOX 2 </div> <div id="box3"> BOX 3 </div> </div> <hr> <footer> FOOTER </footer> </div> </body> </html>

As you know, CSS = Cascading Style Sheets so <style> embedded in page overrides external/linked stylesheet. The goal would be to keep the HTML page as lightweight as possible so it downloads quickly. The external stylesheet should also be as lightweight as possible, but you can declare all the elements in the external stylesheet and only use a certain selection of them in any given HTML page.

Thanks for the detailed reply auntnini!

I learnt alot especially the css rule for the footer; "clear:both;" .

However, I noticed another problem. :/

I tried to move "box1" down 50px by using...

HTML Code:

#box1{ position:relative; top:50px; }

... and "box1" goes ON TOP of the footer! :'( I want the footer to be pushed down no matter where I place box1, box2 and box3. If I push the footer 50px down to accommodate "box1", my other web pages may have a different layout and the footer will have a 50px gap on the rest of the pages. I hope you get what I mean.

Below is the entire code:

HTML Code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #3FF;} /* remember to set HTML 5 elements display:block: */ #wrapper{ width:900px; background-color:red; margin:auto; overflow:hidden; } .container { width:90%; margin:2px auto; background-color:white; } header{ display: block; margin: 2px auto; width:90%; height:300px; background-color:green; } hr{ clear:both; } #box1{ width:30%; height:200px; background-color:yellow; float:left; margin:10px; padding:2px; position:relative; top:50px; } #box2{ width:30%; height:200px; background-color:purple; float:left; margin:10px; padding:2px; } #box3{ width:30%; height:200px; background-color:pink; float:left; margin:10px; padding:2px; } footer{ display: block; clear:both; margin: 2px auto; width:90%; height:100px; background-color:black; } </style> </head> <body> <div id="wrapper"> <header> HEADER </header> <div class="container"> <div id="box1"> BOX 1 </div> <div id="box2"> BOX 2 </div> <div id="box3"> BOX 3 </div> </div> <hr> <footer> FOOTER </footer> </div> </body> </html>

Thanks! :D

I realized that I need to use margins and padding for layout rather than just relying on position.
Thanks anyway. :)

CSS position property

See for instance http://webdesign.about.com/od/stylep...spposition.htm, http://www.w3schools.com/cssref/pr_class_position.asp. etc.

position: relative; offsets element but original space is still reserved for it. Think what you want is margin-top: 50px; (shorthand: top right bottom left = margin: 50px 10px 10px 10px;}. Listing one value -- as in margin: 10px; -- is shorthand for all 4 sides; two values would be top/bottom right/left.

I use position;relative manly to establish a "positioned parent" element for any nested elements.

fooling around

Think the basic answer to your original question was that the new HTML 5 elements have default display:inline (because most browsers have not yet set their styles to make them display:block) so you have to style them display:block.

Then you have to consider that some browsers (especially IE) do not support HTML5 elements.

This got me to thinking ... maybe you should simplify your style sheet by just using classes for .container and .box (the following has 30% .boxThird and 45% .boxHalf) and classes for different background colors. You can apply multiple space-separated classes to same element, Hence the following (for fun).

Code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #3FF;} /* remember to set HTML 5 elements display:block: */ #wrapper{ width: 95%; max-width:900px; min-width: 400px; margin:auto; overflow:hidden; } .container { width:90%; margin:2px auto; padding: 2px; border: thin #FF0 solid; overflow:auto; } hr { clear:both;} .boxThird{ width:30.5%; height:200px; float:left; margin: 20px .95%; padding:2px; border: thin #000 solid; } .boxHalf { width:47%; height:200px; float:left; margin: 20px .97%; padding:2px; border: thin #fff solid; } .bgRed { background-color: #F00;} .bgGreen { background-color: #0F0;} .bgBlue { background-color: #00F;} .bgBlack { background-color: #000;} .bgWhite { background-color: #FFF;} .bgYellow { background-color: #FF0;} .bgPink { background-color: #F0F;} .bgPurple { background-color: #90F;} .bgGray { background-color: #CCC;} .bgAlpha { background: rgba(255,255,255, 0.50); } </style> </head> <body> <div id="wrapper" class="bgAlpha"> <div class="container bgRed"> <h1>HEADER</h1> <p> </p> <p> </p> </div> <hr> <div class="container bgWhite"> <div class="boxThird bgBlue"> <h2>BOX 1</h2> </div> <div class="boxThird bgGreen"> <h2>BOX 2</h2> </div> <div class="boxThird bgRed"> <h2>BOX 3</h2> </div> </div> <hr> <div class="container bgYellow"> <div class="boxHalf bgPurple"> <h2>BOX half</h2> </div> <div class="boxHalf bgGreen"> <h2>BOX half</h2> </div> </div> <hr> <div class="container bgGray"> <h3>FOOTER</h3> </div> </div> </body> </html>