How to add a fixed width div next to an auto width div?

Question

I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side. When I float the width:auto div left and fixed width div to the right it goes under instead. I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width. Thanks

Answer 1

You can make it like this:

Say you have those 2 divs inside a parent container, which expands to fit the page:

<div id="container">

    <div id="autowidth">text expands her...</div>

    <div id="fixed">This is a fixed column</div>

</div>

In your CSS:

#container {
    width:100%;
    border:1px solid black;
    padding-right:200px;
}

#autowidth{
    width:100%;
    background-color:red;
    float:left;
}
#fixed{
    width:200px;
    background-color:green;
    float:right;
    margin-right:-200px;
}

Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.

I'm pretty sure there might be more elegant solutions out there, so bear with me.

if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )