ansaurus

Question

Is there a simple 3-column, pure CSS layout?

Answer 1

+1 A:

I agree with Robert. Due to browsers interpreting CSS rules and rendering the final page differently I doubt you'll find a perfect solution without being more flexible in your requirements.

Nick 2009-05-15 09:23:36

Answer 2

+15 A:

There is no such thing as "simple" when you talk about CSS.

But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.

Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.

[EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.

[EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.

A brain is like a parachute: It's nice to have but only useful when it's open.

Aaron Digulla 2009-05-15 09:24:15

Tables were designed for expressing relationships between bits of data (with each item in a row having something in common and each item in a column having something in common). Having all the cells in a row share a height is a consequence, not a cause.

David Dorward 2009-05-15 09:26:29

Well, you have a goal and you have two tools. One is frowned upon and the other doesn't fit the bill at all ... which one do you use?

Aaron Digulla 2009-05-15 09:30:17

+1 there is no shame using a table for layout as long as it stays simple.

Luper Rouch 2009-05-15 09:30:19

This would all not a problem if all browsers would support display: table-cell etc -- once again it's Internet Explorer spoiling it for everyone.

fforw 2009-05-15 10:32:08

I don´t think there is just one solution that suits all. I have not resorted to tables in a very long time for a 3-column layout, including complex layouts, but I guess I might if it seems the best solution. Analysing the graphic design dictates the way to go, but I can´t help thinking in blocks instead of cells and tables, things have changed.

jeroen 2009-05-15 15:09:39

@jeroen: That's what I say: Use your brain. I see you didn't post an answer for this question. Why is that? Can it be done with CSS without hacks? I have my doubts.

Aaron Digulla 2009-05-15 16:04:34

ie 8 has some serious bug setting max width on image tags inside a table which forces you to go for the hacky div solution

Sam Saffron 2010-01-25 13:16:41

Answer 3

+1 A:

You can achive this by using jS.

If you were to create 3 Divs one float left one flot right and the middle as margin left & right with a width to centre it.

Then with a bit of JS each div having their own ID you could calcultate their height set the 2 lowers ones to the highest value.

Pretty simple with Jquery.

Lee 2009-05-15 10:13:43

True, it's easy with javascript... but he asked for a pure CSS solution.

TM 2009-05-15 12:36:41

Answer 4

A:

divide page into three columns, same height?

<html>
<head>
<style type="text/css">
#col_wrapper{
    height: 400px;
}

.col{
    width: 33%;
    float:left;
    height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
    <div class="col">
        one
    </div>
    <div class="col">
        two
    </div>
    <div class="col">
        three
    </div>
</div>
</body>

no quirks and pretty plain.

gunnarsson 2009-05-15 10:31:09

Should have mentioned that fixed-height wouldn't work. One page might have 5 paragraphs of text in the middle column, another might have 25.

Sean 2009-05-15 11:34:34

Answer 5

A:

http://960.gs/

This one can be used for a 3-column layout (and for various other layouts). Personally, I don't think it's a great idea to use divs for everything, but it's simple and well .. it works.

edit: For a 100% width layout http://www.alistapart.com/articles/fluidgrids/ may help, but I'm not sure if this kind of layout still qualifies as "simple".

Sebastian Gift 2009-05-15 10:39:25

Sorry, should have mentioned that I'm looking for a 100% width (with the center column being liquid).

Sean 2009-05-15 11:37:39

Yeah, the one from a list apart looks a little complex. One of those where it's not really clear which is less desirable, using a stylesheet that complicated, or using a table even though tables aren't intended for layout.

Sean 2009-05-15 14:00:42

Answer 6

+4 A:

You might be able adapt:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Sinan Ünür 2009-05-15 12:25:15

That one does look promising, but I guess I should have mentioned I am looking for one with pixel-width columns, not percentage width. That same website contains a template for pixel widths (the "holy grail" one I mentioned above) but it's a very convoluted stylesheet, which I would have to say is less desirable than using tables for layout.That one would be very good though for someone who needs percentage-width columns, though.

Sean 2009-05-15 14:03:28

Here is a pixel width version:http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

Matthew James Taylor 2009-05-16 14:18:05

Answer 7

A:

YAML

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

It contains some IE bug fixes, but you can remove them.

mjustin 2009-05-15 12:33:09

Too many things named YAML these days!

TM 2009-05-15 12:38:00

ansaurus

tags:

views:

answers:

Is there a simple 3-column, pure CSS layout?

related questions