htmlcsscss-floatvariable-width

Prevent float wrap until elements have reached min-width


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?


Solution

  • 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;
    }
    
    }