Maximize a floating div?

Say I have 2 divs side by side: 1 flo开发者_JAVA百科at left, and the other float right. Now say I fix the size of the left floating div to say 200px. How do I force the right floating div to "maximize" itself or occupy the rest of the horizontal screen space (regardless of the size of the browser window?

Here's a solution (inverted, right is fixed 200px) for you using position:absolute.

Here's a solution where the left is fixed 200px.

The method: you basically fix the left "sidebar" and add a margin to the right flexible column which is equivalent to the sidebar's width.

The code looks like this:

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}​

They both work in IE6 as is.

You can't as it's not to the floated element to fit the remaining space. If you want your right floated div to take the whole lasting space you should let the float property to none and let the display to block.

When content of 'right' div has no special burst-out content (for example too long text without space, or large image) - just remove float:right

<div style="width:300px;border:red 1px solid">
    <div style="float:left;width:100px;border:1px solid green;">bla</div>
    <div style="border:1px solid black;">bla-bla</div>
</div>

A don't think there is a good way to do this without using javascript (or the flexible box model, which isn't supported in IE).

I'd just find the viewport width, then take away 220, then set the width. Using jQuery that will be a oneliner.

As mentioned by Rich Bradshaw, you could use Javascript. My first attempt (using jQuery) would be

<script type="text/javascript">                                         
function resize_div() {
  $("#maxdiv").width($("#maxdiv").parent().outerWidth()-200);
}
$(document).ready(function() {
  resize_div();
});
$(window).resize(function() {
  resize_div();
});
</script>

Use "faux columns": an example.

HTML:

<div class="menu">
    menu<br />
    menu<br />
    menu
</div>
<div class="contents">
    contents<br />
    contents<br />
    contents<br />
    contents
</div>

CSS:

.menu {
    background: blue;
    color: yellow;
    width: 100px;
    float: left;
}
.contents {
    background: green;
    margin-left: 100px;
}

If you need to have background on the whole height for the "menu", and another for the "contents":

1. Use a background-image on the container, repeating-y and starting top-left;
2. That image should have the width of the "menu" and the color of the menu's background;
3. And use color as background as well, the colour that you want for the content's background.

Like this:

.container{
    background: top left yellow url(http://www.google.com/images/firefox/sprite2.png) repeat-y;
}