All geek questions in one place

Elastic layout with maximum width and minimum width using mesh

I want to design 4 column layouts (in addition to the wizards and footers that occupy the entire available page width), so that the right column is fixed at 200px and the other is fluid with a minimum width = 960px and max. -width = 1216px.

Thus, this means that while the browser window is larger than 960 and less than 1216 pixels wide, the layout acts like a liquid layout. When the browser window is larger than 1216, it acts as a fixed layout with a width = 1216px and a page centered in the browser viewing window. If the browser window is reduced to less than 960 pixels, a horizontal scroll bar will appear at the bottom because the minimum width is 960 pixels.

I liked the mesh system of site layout development (example http://960.gs/ ).

The doctrine on my webpage is <!DOCTYPE html> (aka html5 doctype)

The solution should work for IE 6 7 8 9 and FF, Safari, Chrome, Opera.

We hope that this will make it clear what I'm looking for.

What is the solution to this problem based on the above conditions?

I researched Google, but could not find a solution. I am faced with a solution like 3 columns with maximum width, but without a grid and it looks too awkward.

Later I have to add support for a small screen (mobile devices), for which I need to set some column to display: none and stack other columns on top of each other using media queries, but first I need to overcome the problem above.

+2
source share
1 answer

I tested this in IE7 / 8 and the latest versions of Chrome, Firefox, Opera, Safari.

This will not work in IE6 (as @meagar said) due to min-width and max-width - there are many resources on the Internet that describe hacks in detail to get around this. I am not going to waste my strength on this myself if the rest of my code is not suitable for you. Also, I'm not interested in using the CSS system grid.

Live Demo (with a higher right column)
Live Demo (with a higher liquid column)

HTML:

 <div id="container"> <div id="header">header</div> <div id="fluidColumnContainer"> <div class="column">column 1</div> <div class="column">column 2</div> <div class="column">column 3</div> </div> <div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div> <div id="footer">footer</div> </div>

CSS

 html, body { margin: 0; padding: 0; border: 0 } #container { margin: 0 auto; min-width: 960px; max-width: 1216px; overflow: auto } #fluidColumnContainer { padding: 0 200px 0 0 } #fixedColumn { width: 200px; float: right } .column { float: left; width: 33% } #header { height: 90px } #footer { height: 90px; clear: both }
+3
source

Source: https://habr.com/ru/post/892094/

More articles:


All Articles