ansaurus

Question

3 columns: one with max-width, another two with min-width

Answer 1

+2 A:

I'm no expert, however I'm pretty sure that if the answer is yes that it is on this page:

Perfect multi-column CSS liquid layouts. iPhone compatible.

That page (and the entire site) is brilliant - it shows you how to achieve a lots of different layouts (using just CSS), and explains exactly how and why they work. Even if that page doesn't contain a layout which suits you, there is a good chance that page will give you a rough idea of the approach you need to take.

Also, good luck!

Kragen 2010-10-20 12:35:17

It's a nice page, but it doesn't seem to cover my problem with min-width/max-width.

NV 2010-10-20 13:05:05

Answer 2

+1 A:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
    <div id="aside">Leftmost content</div>
    <div id="primary">Primary content</div>
    <div id="secondary">Secondary content</div>
</div>
</body>
</html>

A couple things about this layout:

I specified the height and background for display purposes only.
Overflow auto is on the containing element to clear the floats; though you can use a clearer div too.
The container has a fluid width, but is maxed out at 960. I choose this number arbitrarily, but it is a good idea to max out fluid widths before lines of text become too long.
If you keep the container fluid, the layout will break if the viewport gets small enough. EDIT: I added a min-width of 400px to the container, this should fix the problem.

Additionally, I would take a look at http://www.alistapart.com/articles/holygrail/ . Although it is an article detailing a fixed-fluid-fixed three column layout, I reckon there are a few ideas there that you could use to improve upon my layout, if you were so inclined.

Moses 2010-10-20 14:26:34

This doesn't work well when I disable `max-width:960px` http://elv1s.ru/i/3-columns-one-with-max-width-another-two-with-min-width-bug.png. When #container greater than 1000px width, #aside and #secondary still 40% width. At this case side columns should be more than 40% width to fit the #container.

NV 2010-10-20 15:09:46

@NV Because the middle column has a max-width of 200px and is set to 20% of container, when 20% of the container exceeds 200px, the layout stops expanding. You can mask this effect by setting the background of the container the same as the middle column. However, I cannot imagine many scenarios where you would want to optimize for a viewport larger than 1000.

Moses 2010-10-20 16:06:50

Answer 3

+1 A:

Table-based solution by @PanyaKor.

NV 2010-10-20 15:46:01

ansaurus

tags:

views:

answers:

3 columns: one with max-width, another two with min-width

related questions