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开发者_如何学JAVA, Chrome 7, Safari 5, and Opera 10.63.
Table-based solution by @PanyaKor.
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!
<!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.
加载中,请稍侯......
精彩评论