Question

I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;

Now if the layout is at least 757px large (so the size where the min property doesn’t apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.

I made some graphics to show the behavior:

Layout 1000px not overflowing:

Layout 500px overflowing

Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it’s min width.
Also JavaScript shouldn’t be used excessive!

Regards, Stefan

Answer 1

Sure, this is actually pretty easy and requires a very minimal amount of code:

HTML:

<div class="sidebar">
...
</div>
<div class="content">
...
</div>

CSS:

.sidebar{ 
    float: left;
    width: 33%;
}
.content { 
    overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}

You can view the live demo here: http://jsfiddle.net/7A4Tj/

Edit:

If you’re trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.