The #wrapper div
- In the HTML, enclose all of the content between the <body> tags in a #wrapper div: <div id = “wrapper”>.
- In the CSS style the #wrapper ID in the following way:
- You want to assign a width (something like 800px)
- You want to set margin: auto; this causes the #wrapper to center in the browser window.
- In the HTML, put the menu items within <li> tags.
- In the HTML, before the first <li> tag, put the <ul> tag. After the last </li> tag, put the </ul> tag. So your navigation looks like this:
- <li> menu item 1 </li>
- <li> menu item 2 </li>
- <li> menu item 3 </li>
- <li> menu item 4 </li>
Normal Document Flow
Left to itself, HTML and CSS stacks elements flush left, one on top of the other, based on the order they appear in the HTML. This is called Normal Document Flow. The best way to work with positioning in CSS is to start with Normal Document Flow and then only make those changes that are necessary to achieve your design.
Float is a property that will let two elements align in a layout. For our purposes, I recommend that you use it only to float an image inside a box of text. You can also use Float to position two columns next to each other, but you do not have the same control that you have when you use absolute positioning. Apply the Float property to an img tag in the CSS. Here are some URLs that explain the use of Float and Clear:
- All About Floats – http://css-tricks.com/all-about-floats/
- Floating 101 – http://alistapart.com/article/css-floats-101
- W3Schools – http://www.w3schools.com/css/css_float.asp
Absolute positioning is a much clearer way of ordering layouts. With Absolute Positioning you specify the x.y coordinates of a box element. To make Absolute Positioning function correctly, you should specify an outer box as the area the absolutely positioned element is positioned relative to. The outer box is set to position: relative; and this lets the browser know that anything with position: absolute; within the outer box is positioned within it. If you don’t assign position:relative to an outer box, the absolutely positioned element will be positioned relative to the browser window. In our situation, the #wrapper is the outer box and the article is the absolutely positioned element. It looks like this in CSS:
Inside Absolute Positioning – http://css-tricks.com/absolute-positioning-inside-relative-positioning/