static void

CSS Layouts

Layout experiments which work in Netscape 4 (sort of), IE5/6 and Moz (with minor problems).

2 column

float:left;width:200px;
No style

Wraps under left float


float:left;width:80%

"ALA-style"

No style

Wraps under left float


float:right;width:200px;
Appears first in source order
No style

Wraps under right float


float:left;width:200px;
float:left;

Does not wrap under left float

In Mozilla only, if wider than available space, is completely under left float


position:relative;height:20em; just to frame the absolute positioned boxes below.
margin: 10px 10px 10px 200px;
position: absolute;
top: 30px;
left: 10px;
width: 200px; /*content + padding + margin*/
voice-family: "\"}\"";
voice-family: inherit;
width:190px;/*content only*/

Any order in source code
(uses Tantek box hack- in stylesheet use NN4 /*/*/ hiding)



3 column

float:left;width:28%; border:1%;padding:1%;
28% content + 2% borders + 2% padding = 32% in correct box model

The percentage width only works for IE because of the broken box model (although it will work on Mozilla if there is no padding, margin or border).

float:left;width:28%; border:1%;padding:1%;

Pixel paddings, margins and borders aren't compatible with percentage content. One amendment may be to use the SMBH or Tantek Hack to show IE a width of 33% and Mozilla a 29% width.

float:left;width:28%;border:1%;padding:1%;

Again, if the final column has no width, it expands to the available width in IE, but drops down below the preceding column in Mozilla. Note that very long text like thisverylonglinewithnobreaksinitatallsothatthebrowserhasnoideawheretobreakthelinewill break out of the borders in Mozilla or drop below the preceding columns in IE (use word-wrap:break-word; for IE).