Div in the center with specific width, sides must

Question

I'm trying get 3 div's to fit aside eachother, the two side divs need to fill the rest of the page equally:

    <div class="second_bar">
        <div class="status_border_left">
        </div><div class="nav_bar">
        </div><div class="status_border_right">
        </div>
    </div>

My CSS:

.status_border_left{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.status_border_right{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.nav_bar{
    position:relative;
    margin: 0 auto;
    height:80px;
    width:980px;
    background-color:green;
}
.second_bar *{
    display:inline-block;
    vertical-align:top;
}
.second_bar{
    height:80px;
    width:100%;
}

Any way to do what I want without involving JavaScript?

Answer 1

You can try the css3 flexbox module. like this:

HTML

<div class="second_bar">
  <div class="status_border_left">left</div>
  <div class="nav_bar">nav bar</div>
  <div class="status_border_right">right</div>
</div>

CSS

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.second_bar {
  width: 100%;
  min-height: 100%;
  color: #fff;

  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.status_border_left,
.status_border_right {
  width: 20%;
  background: green;
}
.nav_bar {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

Please view the demo.

Answer 2

Here is one way of doing it by using CSS display types of table and table-cell.

You need to make a small modification to your left and right child elements, simply define a wrapper .content div to enclose any content.

The HTML:

<div class="second_bar">
    <div class="status_border left">
        <div class="content"></div>
    </div>

    <div class="nav_bar"></div>

    <div class="status_border right">
        <div class="content"></div>
    </div>
</div>

and the CSS:

.second_bar {
    height:80px;
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.status_border {
    display: table-cell;
    vertical-align: top;
    width: auto;
    background-color: yellow;
}
.status_border .content {
    width: auto;
    height: 14px;
    background-color: pink;
}
.nav_bar {
    display: table-cell;
    vertical-align: top;
    height: 80px;
    width: 980px;
    min-width: 980px;
    background-color: green;
}

For your container block .second_bar, set the display type to table and the width to 100%.

The child elements .status_border and .nav_bar have display: table-cell and vertical-align: top, but you may adjust that depending on your layout requirements.

The .nav_bar child div has a width of 980px, but because it is a table cell, the width could shrink to less than 980px if the window is small enough. Table cell's will shrink to fit the content if needed. To maintain the full width, set the min-width to the width.

To get your left and right status indicator bars to be 14px high, you need to have a separate block element with the left and right child elements.

By default, the three table-cell blocks will take the height of the tallest of the three table cells, in this case, the 80px .nav_bar div.

If you set .content's width to auto, it will both will take on the same width and fill up the rest of the available page width.

Note that table-cell is not supported in IE8, but otherwise, this is a pretty useful pattern.

See demo fiddle at: http://jsfiddle.net/audetwebdesign/SyAAQ/

Answer 3

you need float

div1{
float:left;
}

div2{
float:left
}