ansaurus

Question

Answer 1

+2 A:

There are 4 ways to do it:

Faux columns. Basically trick the user into thinking the columns go down to the bottom of the page by creating a wrapper and giving it a background image with a divider. In your case, for a fluid layout, you'd have to do it twice and use a left-aligned bg image once, and a right-aligned one the other time.
The "One True Layout". This is a rather ugly hack that works by specifying a huge bottom padding as well as a negative bottom margin, then hiding the overflow. It works fairly well in practice, but has a lot of small problems, such as no way of applying bottom borders (see the link for a full list).
Use a wrapper with display: table and give the columns a display: table-cell. I have read that this works in most browsers, but haven't tried this myself, so no guarantees.
Go back to tables. CSS is semantically great and all, but sometimes you have no choice but to sacrifice machine semantics for a decent user experience.

Max Shawabkeh 2010-02-20 20:31:41

Unless I've misinterpreted the question I don't think the heights of all columns equating to an equal rectangle is what he desires, meaning that this can be achieved without the use of the above?

Steve 2010-02-20 20:37:10

I may have mistaken then intent (it's unclear), but from the question and image it sounds like any of the 4 suggestions above would work, since the two of the columns (center and right in this case) are typically in a wrapper, which can have a header applied without breaking the rest of the layout.

Max Shawabkeh 2010-02-20 20:55:20

I am using solution 2 and, finally, I did the layout but it looks bad on IE. :( Will try 3 now. If is not working I'm going back to tables

Victor Hurdugaci 2010-02-20 21:12:56

@Max: Solution 3 is not working. See the update in question.

Victor Hurdugaci 2010-02-20 21:48:44

1. What the IE problem with #2? Perhaps that'll be easier to fix. There's not much to do about #3 since it's either supported or not. 2. Perhaps you could do a faux column between the left column and a wrapper, then do an OTL for the center and right columns inside the wrapper. Myself, I usually end up going for faux columns; you trade a little flexibility but it keeps the code much cleaner.

Max Shawabkeh 2010-02-20 22:23:01

I manged to fix 3. Is working well now. The solution is now in the initial question.

Victor Hurdugaci 2010-02-20 22:52:23

Answer 2

+1 A:

The logical process for doing this would be to remove B from its current position on the DD Template.

Have the central div stretch to take up the additional space created.

Within that have your extra fluid div that you desire.

Then beneath that have another div and within that your fluid div and B.

Steve 2010-02-20 20:34:17

That's what I'm doing. However the result is not good. Now I manged to do something but it looks bad on IE.

Victor Hurdugaci 2010-02-20 21:11:08

ansaurus

tags:

views:

answers:

CSS Fluid Layout with 3 columns

related questions