css - Middle div 100% width

Question

How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs? Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?

Code:

<div class="row-fluid">
<div class="span12">
    <div class="sidebar">1</div>
    <div class="content-box">2</div>
    <div class="sidebar">3</div>
</div>
</div>

http://jsfiddle.net/U3Hr5/2/

Answer 1

My suggestion is using a table since you want all of them to be on the same row but with their own heights. Html:

<div class="row-fluid">
<table style="width: 100%">
    <tr>
        <td class="sidebar">1</td>
        <td class="content-box">2</td>
        <td class="sidebar">3</td>
    </tr>
</table>

Css:

.sidebar {
    width:225px;
    background-color:blue;
}
.content-box {
    background-color:red;
}

Here is the fiddle edit: http://jsfiddle.net/mDpEX/

//Flipbed

Answer 2

If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,

#container {
    display: table;
    width: 100%;
}
#left, #middle, #right {
    display: table-cell;
    height: 100px;
}
#left, #right {
    width: 150px;
    background: green;
}
#middle {
    background: gray;
}

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

jsfiddle

More on css display properties

Answer 3

Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).

Answer 4

I assume you want something like this.

The HTML:

<div class="row-fluid">
    <div class="span12">
        <div class="sidebar">1</div>
        <div class="content-box">2</div>
        <div class="sidebar">3</div>
    </div>
</div>

The CSS:

.sidebar {
    float:left;
    width:225px;
    background-color:blue;
}
.content-box {
    clear:left;
    background-color:red;
    width:225px;
}

Hope this helps.

Answer 5

It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.

http://jsfiddle.net/U3Hr5/4/

HTML

<div class="row-fluid">
    <div class="span12">
        <div class="left sidebar">1</div>
        <div class="content-box">2</div>
        <div class="right sidebar">3</div>
    </div>
</div>

CSS

.span12 {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    width: 225px;
    background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
    margin-left: 225px;
    margin-right: 225px;
    background-color:red;
}

Answer 6

You can try something like this http://jsfiddle.net/kKGVr/

Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.

It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.

HTML:

<div id="wrapper">
    <div id="right">...</div>
    <div id="left">...</div>
    content here
</div>

and CSS:

#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}