This is the Main Content Area of the Page.
This page is the similar toLayout2 except that this page uses position:fixed for the header and nav sections. This causes them to remain fixed in the window when the screen is scrolled. Try it! Note that IE 6 and earlier do not support fixed positioning, and IE 7 does not place the fixed elements in the same place as Firefox does, so I don't recommend this layout for compatibility with older browsers.
This page has body margins set to zero. Then there is a div with id=wrapper that is set to a width of 800 pixels and has position:relative so that I can absolutely position its descendents relative to it. The header is formatted with the style #header and is absolutely at top: 0px and left: 0px of the wrapper. The nav section is formatted with the style #navi and is absolutely positioned at top: 0px and left: 0px of the wrapper, and it has a top margin of 70px so that its content is lower that the header. It has a width of 150px plus 10px of padding on all sides. The main content area section is formatted with the style #main and has a content width of 610 pixels and a margin on the left of 170px and on the right of 10 px. There is 80px of padding at the top so that the content is lower down than the header.
Hi there! I'm an absolutely positioned div just for fun. In fact, there is a second div behind me with a little offset to provide a drop shadow. My z-index is higher, so I'm on top.
This paragraph is inside a div (with class="picpara") along with an image before the paragraph. The image is 93 pixels wide by 123 pixels tall. The style .picpara makes the position of this div relative (so that the image can be absolutely positioned relative to it). It also sets min-height: 123 so the div will be a least as tall as the image. Another style (.picpara img) absolutely positions the image out to the side using left: -118px.
This is another div using class .picpara just like the one above. Again, the paragraph in the div is preceded by a 93 x 123 image which gets positioned out to the left. The two styles that format this are made with the assumption that there will be a set of divs like this, each containing onlu one image of exactly the needed size in it.
Because there is no way to "clear" from an absolutely-positioned element, I used the trick above of setting the min-height property of the div.picpara so that it would be displayed at least as tall as the images that get moved out to the left. If the text in the division's paragraph is long enough to make the division taller than 123 pixels, that's just fine. The min-height is set just to be sure that no image from a .picpara div gets positioned overlapping an earlier one.
These two columns are placed next to each other with styles .col1 (on this div) and .col2 (on the right div). This left div is floated left. The right div has a wide left margin.
The content of the left column should be taller than column two since column one owns the border between the two columns. You could pad it out with blank paragraphs if needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend aliquet enim, quis dignissim eros auctor id. Integer porttitor massa sit amet.
Maecenas eleifend convallis lobortis. Curabitur sodales ultrices elit, ac elementum libero dignissim ut. Aenean vulputate lacinia nisi ac elementum. Pellentesque facilisis sit amet risus sit augue pharetra!
Curabitur id augue justo. Maecenas egestas libero quis massa commodo eget suscipit leo volutpat. Nulla eleifend aliquet enim, quis dignissim eros auctor id. Integer porttitor massa sit amet nunc malesuada eu congue quam posuere. Vestibulum pulvinar massa vitae lacus auctor a ultricies ipsum adipiscing. Phasellus sit amet dui orci, sit amet consequat lacus! Cras imperdiet aliquet arcu.
Nullam sollicitudin gravida leo, a posuere arcu dapibus ac. Nullam in lectus ut quam ultricies dictum et in felis. Mauris interdum tortor at leo suscipit id aliquet erat feugiat. Ut laoreet luctus bibendum. Cras a diam arcu. Nulla nibh nibh, pharetra non mattis a, sagittis id nisl. Phasellus a nibh magna. Integer ac mollis leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mollis ante. Morbi hendrerit iaculis tempor? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultricies cursus justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas libero quis massa commodo eget suscipit leo volutpat. Nulla eleifend aliquet enim, quis dignissim eros auctor id. Integer porttitor massa sit amet nunc malesuada eu congue quam posuere. Vestibulum pulvinar massa vitae lacus auctor a ultricies ipsum adipiscing. Phasellus sit amet dui orci, sit amet consequat lacus! Cras imperdiet aliquet arcu.
Mauris interdum tortor at leo suscipit id aliquet erat feugiat. Ut laoreet luctus bibendum. Cras a diam arcu. Nulla nibh nibh, pharetra non mattis a, sagittis id nisl. Phasellus a nibh magna. Integer ac mollis leo.