Menu
I have variable-width HTML layout with a fixed-width menu to the left of a content <div> of variable width (set by css max-width and min-width). For very narrow browser windows I would like the content to wrap beneath the menu, and I am currently achieving this by setting float:left on both menu and 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, wrapping of the content div currently occurs as soon as the browser viewport is smaller than 1000px (menu width + content max-width). I would like to have the width of the content reduce first, and have the content wrap beneath the menu only when viewport is smaller than 500px wide (menu width + content min-width)
Is there a way to achieve this, either with my current arrangement of floated <div>s, or otherwise?
810
Please check if this is the behavior you want.
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;
}
}
I suppose this is what you want: http://jsfiddle.net/joplomacedo/WXFQz/
The solution is a simple media query - below a screen-width of XYZpx do this. If you've never heard of it before here's an article about it 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's possible to do it without this extra element. it's 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's width */
min-width: 200px;
}
.menu,
.content {
height: 200px;
}
.menu {
float: left;
width: 200px;
}
.content {
margin-left: 200px; /* same as '.menu's width */
}
@media (max-width : 400px) {
.menu {
float: none;
width: auto;
}
.content {
margin-left: 0;
}
}
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
