most simple 3 column CSS layout

[chlori]

Hello

How simple can a 3 column CSS layout be?

Requirements:
• Left and right column fixed width, like 10 em
• Center column flexible
• Works in (almost) all window sizes
• Works in (almost) all browsers
• No absolute positioning
• Valid HTML + CSS (No workarounds preventing HTML or
CSS from validating)

I was thinking of something like
http://glish.com/css/2.asp but with em widths for the
left and right columns.

I like this one, it's valid but has absolute
positioning and I'm looking for something without.
http://bluerobot.com/web/layouts/layout3.html

Is it possible at all? How?

 

[Bernhard Sturm]

Hello

How simple can a 3 column CSS layout be?

Requirements:
• Left and right column fixed width, like 10 em
• Center column flexible
• Works in (almost) all window sizes
• Works in (almost) all browsers
• No absolute positioning
• Valid HTML + CSS (No workarounds preventing HTML or CSS from validating)

I was thinking of something like http://glish.com/css/2.asp but with em
widths for the left and right columns.

I like this one, it's valid but has absolute positioning and I'm looking
for something without.
http://bluerobot.com/web/layouts/layout3.html

Is it possible at all? How?

I always use css-discuss for layout examples. check this page:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Usually I apply the mehtod suggested by redmelon, but this is with fixed
widths, and you are looking for a floating one, so maybe this will do it
for you:

http://www.redmelon.net/tstme/3colpercent/

and yes, it's XHTML strict validated...

HTH
bernhard

 

[Richard]

Hello

How simple can a 3 column CSS layout be?

Requirements:
• Left and right column fixed width, like 10 em
• Center column flexible
• Works in (almost) all window sizes
• Works in (almost) all browsers
• No absolute positioning
• Valid HTML + CSS (No workarounds preventing HTML or
CSS from validating)

I was thinking of something like
http://glish.com/css/2.asp but with em widths for the
left and right columns.

I like this one, it's valid but has absolute
positioning and I'm looking for something without.
http://bluerobot.com/web/layouts/layout3.html

Is it possible at all? How?

http://somestuff.batcave.net/

The simplest 3 col layout there is.
CSS defines the width and looks.

 

[Nik Coughin]

http://somestuff.batcave.net/

The simplest 3 col layout there is.
CSS defines the width and looks.

Doesn't meet OP's requirements, fixed width and invalid markup.

 

[Duende]

While sitting in a puddle Nik Coughin scribbled in the mud:

Doesn't meet OP's requirements, fixed width and invalid markup.

But simple.

 

[chlori]

Bernhard Sturm schrieb am 18.01.2005 22:28:

Usually I apply the mehtod suggested by redmelon, but this is with fixed
widths, and you are looking for a floating one, so maybe this will do it
for you:

http://www.redmelon.net/tstme/3colpercent/

This is with %. But I'm looking for this:
• col left: 10em
• col right: 10em
• col center: the rest of the page in between

 

[Neal]

This is with %. But I'm looking for this:
• col left: 10em
• col right: 10em
• col center: the rest of the page in between

Simple. Float L and R columns with 10em width, then put 10em margins
on center section.

 

[Bernhard Sturm]

Bernhard Sturm schrieb am 18.01.2005 22:28:



This is with %. But I'm looking for this:
• col left: 10em
• col right: 10em
• col center: the rest of the page in between

so this might do the trick:

http://www.redmelon.net/tstme/3cols2/

but you have to set your values for yourself... please check the
overview as there are all the solutions you asked for:


http://css-discuss.incutio.com/?page=ThreeColumnLayouts

bernhard

 

[Toby Inkster]

• No absolute positioning

Why not? It can be *very* useful for CSS layouts.

 

[Bernhard Sturm]

chlori wrote:




Why not? It can be *very* useful for CSS layouts.

that is true... I don't see why one should consider *absolute
positioning* as something bad... the only drawback of position:xxx; is
(AFAIK) that IE will lose its capability of dynamically increase or
decrease relative units for child elements below the position:xxx;
(font-size is not affected by this, but all other units)

bernhard

 

[ghoul]

http://somestuff.batcave.net/

The simplest 3 col layout there is.
CSS defines the width and looks.

s is for sicko

 

[Lauri Raittila]

Hello

How simple can a 3 column CSS layout be?

Requirements:
• Left and right column fixed width, like 10 em
OK.

• Center column flexible
OK.

• Works in (almost) all window sizes

3 column layout that works on all window sizes. That is not possible. But
read on.

• Works in (almost) all browsers

You might be able to do it in maybe 1% of browsers. There is thousands of
browsers around though.

I was thinking of something like
http://glish.com/css/2.asp but with em widths for the
left and right columns.

That won't work with ems.

I like this one, it's valid but has absolute
positioning and I'm looking for something without.
http://bluerobot.com/web/layouts/layout3.html

Why you don't want to use absolute positioning? You can do that using
absolute positioning so that it works, you don't need use broken code in
that example.

Your own URL? (You have you HTML ready already, right?)

Is it possible at all? How?

Float first piece to left, leave middle thingy alone, and float 3rd on
right. Make center piece inline-block/table. Make side thingies 10em
width. Set suitable min-width for center piece, so that it is easy to
read. 10em might be good. Use work around for IE.

Now it should work on 10em wide window. Problem is that left and right
cols are before center col on code, and when layout collapses. Depends on
your content if this is problem.

It might be possible to make CSS that should put center piece
first/second, but I don't believe it would be supported, so I don't
bother reading whole spec again to find out if my understanding of it is
correct.