Geek Answers Handbook

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

One that does not require the following:

  • Reliance on images (i.e., "artificial columns")
  • Some kind of weird or "hacked" specially designed for IE
  • IE required to run in quirks mode
  • It doesn’t have any oddities, as one of the three DIVs overlapping the others (ie the “holy grail”)
  • Fields set to high negative numbers put them well from the viewing screen (again the Holy Grail layout).

I cannot find a three-line layout in CSS that does not rely on one of the above. And relying on one of the above seems to negate the many benefits of using CSS over tables. I do not want to pull out Photoshop and resize the image every time I want to change the width of my left column. And I don’t want to pull out the calculator to find out how many pixels from the screen side my DIV should be.

I should mention that I am looking for a format with equal height.

Is anyone

EDIT: I'm looking for a 100% width, with the center column being fluid.

EDIT: I also hope to indicate the width of the left and right columns in pixels.

EDIT: Backgrounds may be transparent, but I need a dividing line between the columns that go up and down.

+5
7

, "", CSS.

, -, HTML CSS: .

: DIVs . CSS . , , , .

[EDIT] , CSS , , , - , - , , , , , ? DIV , .

[EDIT2] , , HTML, . . , , , CSS, .

: , .

+16

. - , CSS -, , , .

+1

, jS.

3 Divs, , - , .

, JS, , , .

JQuery.

+1

http://960.gs/

( ). , divs , .. .

edit: 100% http://www.alistapart.com/articles/fluidgrids/ , , - "".

0

YAML

" " (YAML) (X) HTML/CSS- . .

IE, .

0

divide the page into three columns with the 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 simple.

-2
source

More articles: