This is the Main Content Area of the Page.

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> section 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.

 

Totoro

This paragraph is inside an <article> (with class="picpara") along with an image before the paragraph. It's a really short article. The image is 93 pixels wide by 123 pixels tall. The style .picpara makes the position of this article relative (so that the image can be absolutely positioned relative to it). It also sets min-height: 123 so the article will be a least as tall as the image. Another style (.picpara img) absolutely positions the image out to the side using left: -118px. I'm making this text long enough that it should make this paragraph taller than the picture on the left so you can compare to the shorter article below that has less text in its paragraph. The min-height setting of that article will make the following material clear the picture on the left of that article..

Totoro

This is another <article> using class .picpara just like the one above. Again, the paragraph in the article 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 articles like this, each containing only 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.

I just wanted to play with two columns side by side in the part of the document, with a border line between them.

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!

Lorem ipsum dolor sit amet. I always wonder if I'm swearing in Latin when I paste in filler like this.

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.