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.
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?
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.
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.
Last edited by auntnini; 11-11-2012 at 03:41 PM.
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...
... 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.
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.
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).