CODEWITHSUNDEEP
htmlcsslayout
NVI
NVI

Reputation: 15045

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

Three columns must fill the width of the parent container. The width of the left and the right columns must not be less than 150px. The center column must not be greater than 200px width.

I've made a reference page that uses JavaScript to do the layout. Is it possible to do the same layout with pure CSS?

screenshot http://elv1s.ru/files/html+css/min-width_max-width_columns.png

It should work at least in IE 8, Firefox 3.6, Chrome 7, Safari 5, and Opera 10.63.

Upvotes: 8

Views: 2043

Answers (3)

NVI
NVI

Reputation: 15045

Table-based solution by @PanyaKor.

Upvotes: 4

Moses
Moses

Reputation: 9173

<!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:

  1. I specified the height and background for display purposes only.
  2. Overflow auto is on the containing element to clear the floats; though you can use a clearer div too.
  3. 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.
  4. 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.

Upvotes: 2

Justin
Justin

Reputation: 86729

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

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!

Upvotes: 3

Related Questions