Geek Answers Handbook

Prevent the float until the elements reach the minimum width

I have a variable width HTML layout with a fixed width menu to the left of the variable width <div> content (set css max-width and min-width). For very narrow browser windows, I would like the content to wrap under the menu, and currently I achieve this by setting float:left both the menu and the content.

 <html> <head> <title></title> </head> <body> <div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div> <div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div> </body> </html>

In this example, the flow of the contents of the div is currently occurring as soon as the browser window is less than 1000 pixels (menu width + maximum content width). First, I would like to reduce the width of the content and wrap the content under the menu only if the viewport is less than 500 pixels wide (menu width + minimum content width)

Is there a way to achieve this, either with my current location of the floating <div> s, or else?

+4
source share
3 answers

Check if this behavior is valid.

Demo

Jsfiddle

HTML

 <html> <head> <title></title> </head> <body> <div class="menu">Menu (200px wide)</div> <div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div> </body> </html>​

CSS

 .menu { width: 200px; float: left; border: 1px black solid } .content { max-width: 800px; min-width: 300px; margin-left: 200px; border: 1px black solid } @media all and (max-width: 500px) { .menu { float: none; } .content { margin-left: 0; } }
+5
source

I assume this is what you want: http://jsfiddle.net/joplomacedo/WXFQz/

The solution is a simple multimedia query - under the width of the XYZpx screen this is done. If you have never heard of this before this article about him http://css-tricks.com/resolution-specific-stylesheets/

For those of you who can't see the fiddle, here's the html and css:

HTML:

 <div class="container"> <!-- it possible to do it without this extra element. it simply more intuitive this way --> <div class="menu"></div> <div class="content"></div> </div>

CSS

 .container { max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu width */ min-width: 200px; } .menu, .content { height: 200px; } .menu { float: left; width: 200px; } .content { margin-left: 200px; /* same as '.menu width */ } @media (max-width : 400px) { .menu { float: none; width: auto; } .content { margin-left: 0; } }​
+3
source

there is a demonstration of this from css tricks:

http://css-tricks.com/examples/PerfectFluidWidthLayout/

Hope this is good for you.

0
source

More articles:


All Articles