Menu
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.
272
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style). So if you specify min-width and max-width , you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a width .
Change the maximum width. max-width overrides width , but min-width overrides max-width .
Definition and UsageIf the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect. Note: This prevents the value of the width property from becoming smaller than min-width .
Table-based solution by @PanyaKor.
130
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!
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
