CSS multicolumn layout solutions (was: RE: CSS not enough (was: Re: proposal for HTML4.01 amendment: <BR PAGEBREAK="before">))

Hello Robert, dear list members,


sually I do not like crossposting myself, please excuse.
Because this topic is style related, I crossposted to www-style@w3.org.
But since I do not know wether Robert and Philip and other interested
www-html@w3.org readers also subscribed to www-style@w3.org, I still also
submit to www-html@w3.org.


> -----Original Message-----
> ----- Original Message -----
> From: "Christian Wolfgang Hujer" <Christian.Hujer@itcqis.com>
> >
> > what about:
> > .firstColumn {
> > left:0%;
> > right:75%;
> > }
> > .secondColumn {
> > left:25%;
> > right:50%;
> > }
> > .thirdColumn {
> > left:50%;
> > right:25%;
> > }
> > .forthColumn {
> > left:75%;
> > right:0%;
> > }
> > .firstColumn, .secondColumn, .thirdColumn, .forthColumn {
> > position:absolute;
> > }
> > this is shorter, 4 columns, relative layout, font size independant and
> works
> > fine in Opera 6, Mozilla and Internet Explorer 6 (other browsers not yet
> > tested). Problem: flow of objects following the forth column is broken
> (like
> > in your solution).
>
> I did not come up with this solution and it almost does everything I need.
> Curious, why do you need to set the outer columns right, left to 75%? That
> does not seem intuitive to me.
That is normal CSS2. Extensive studying of section 8 of the CSS level 2
Recommendation explained to me the problems - and the fact that IE even in
version 6 still does not follow the CSS Level 2 Recommendation, even when
the DTD tells to use "strict mode" (or how MS calls this...).

The width property of an element does not contain its margin, border and
padding.
It is only the *content* width.
So if the overall box width shall be 25%, the content width must be set to
auto, which is the case in the above example. To get a value of 25%, this
value must compute automatically, and specifying the left and right
properties is the way to do that.
Specifying the width of an element means specifying its content width, which
explicitely excludes padding, border and margin. So if a nice margins,
borders and paddings are wanted, specifying the (content) width of an
element introduces overlap problems.

> The problem I have with this (and probably it is my ignorance) I
> can't keep
> the leftmost column to be, say 200px and the rightmost column to be, say
> 170px. Then the inner columns are variable depending on the browser width.
> How do you pin the 2cnd column from the left to 200px? Whenever trying to
> set to pixel precision (which is wrong for a browser anyway, I
> know..., but
> for left and right nav areas it is very common) you get the
> overlap problem.

But of course you can do this without overlap problems.

Try this:
.firstColumn {
	left:0%;
	width:150px;
}
.secondColumn {
	left:150px;
	right:50%;
}
.thirdColumn {
	left:50%;
	right:125px;
}
.forthColumn {
	width:125px;
	right:0%;
}
.firstColumn, .secondColumn, .thirdColumn, .forthColumn {
	position:absolute;
}
I've again tested this in IE6, Mozilla and Opera 6.


> > or what about:
> > .firstColumn, .secondColumn, .thirdColumn, .forthColumn {
> > width:25%;
> > float:left;
> > }
>
> this is definitely elegant. I can see where i can use this
Thanks, although I do not like that solution. I am wondering why it works so
well (at least as long as no margins, paddings and borders are specified).

> sometimes. But it does not meet my usual needs.

So what about (for a three column layout):
.firstColumn {
	width:150px;
	float:left;
}
.thirdColumn {
	width:125px;
	float:right;
}
.secondColumn {
	/* no formatting neccessary */
}
Annotation: the third column has to be before the second column in the
document order.
I think, for a three column layout this definitely is the best solution.
And everything regarding margins, borders and paddings works finest in the
first and third column.


Greetings

Christian

Received on Saturday, 12 January 2002 09:49:55 UTC