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