Question

I have two divs, once for main page content and the other for a sidebar.

Both have widths set as percentages, so they will keep their proportions if the window is resized. However, the sidebar has a minimum width, since that content can only resize so much before it begins to look broken. When the window is resized small enough that the min-width kicks in, the sidebar begins to encroach on the main page content, because the main page content does not know that it now needs to take up a smaller percentage than the one defined to account for the sidebar. I’m trying to make it so that, when we have enough width, the main content and sidebar can maintain their respective proportions, but when we get to the point where the sidebar content would begin to look broken, the main content adjusts its width more to compensate.

Is there a way to do this with css/html, or will I need to write some JavaScript to calculate the new widths and adjust the values in the stylesheet dynamically?

Here’s a (simplified) example of what I have:

HTML:

<div id="maincontent">
    <!-- Main page content here -->
</div>

<div id="sidebar">
    <!-- Sidebar content -->
</div>

CSS:

#maincontent
{
    width: 85%;
}

#sidebar
{
    width: 15%;
    min-width: 120px;
}

In this example, everything will be fine as-is as long as the browser window is more than 800px wide. But once we drop below 800px, the maincontent needs to now become smaller than 85%, to make up for the fact that 120px is more than 15% of the browser width.

Answer 1

You could try

@media all and ( max-size: 800px )  {
    #maincontent { width: 75%; }
}

of course, replace 800px and 75% with the screen size and percent that fits