#leftbox {
position: absolute;
left: 10px;
width: 180px;
}
Il contenuto di questa colonna è posizionato in modo
assoluto dal margine sinistro, ed ha una larghezza
(width) specificata in pixel.
The column content (#leftbox)
is absolutely positioned into that left margin area, and given a pixel 'width'. This is necessary due to the
underlying background image.
#rightbox {
position: absolute;
right: 2%;
width: 30%;
}
Questa colonna lascia trasparire il background del
body. La larghezza di questa colonna (width)
e i suoi margini sono impostati in percentuale.
Se la pagina viene ristretta sotto i 640px, gli elementi nel mezzo e sulla destra possono essere sovrapposti.
#middlebox {
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
Questa colonna This middle column needs a background to keep it from being the same color as the right column. It also has padding and borders, but because it has no 'width', these will not trigger the IE5.x box model problem.
This column must also be the longest column, and must extend below the bottom edge of the viewport at the largest resolution that will be supported, or the 'body' backgrounds will show below the footer.
This entire demo depends on not having 'height' declared on any of the columns. It is done (in this demo) in order to avoid the different methods some browsers use to determine 'height'. Because of these conditions, this layout is best suited for pages that will always have a lengthy middle column, such as weblogs.
The header, footer, and middle column are 'static' (or 'relative'), and these together define the page dimensions. The header and footer may be 'height' specified.
The absolutely positioned div#rightbox is placed following div#leftbox (in the source) so that the 'top' property may be omitted from those divs. This causes them to begin vertically at the point that they would have started, were they 'static'. (directly below the static header) This means that if the header expands due to extra content, all three cols will adjust downward equally. Ain't that nice?
In Mozilla, there may be a 1px gap below the footer at some resolutions, due to a vertical rounding error. This demo describes the effect in greater detail.
In Nav4, use of the the syntax 'div#leftbox' will fail. Use '#leftbox' for that browser. I did this only for clarity.
Kudos once more to Philippe Wittenbergh for helping to make this a much better demo. More Kudos to Mark Howells for the original body background idea.
Holly 'n John
e-mail
©positioniseverything
Last updated: September 6, 2002
Created August 24, 2002
The following is column fill.
Why don't cannibals eat clowns?
Answer: They taste funny.
What is the difference between a lousy golfer and a lousy skydiver?
Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!
Did you hear about the geneticist that tried to cross a potato and a chicken?
He wanted to produce a chicken that would definitely NOT cross the road, but instead,
got a bunch of potatoes that sat around pecking eachother's eyes out.
How many Psychiatrists does it take to change a light bulb?
Answer: Only one, but the bulb has to really want to change.
Why did the egg cross the road?
Answer: It had an inclination.