Stretch a div to fill whitespace

Question

I have 3 divs aligned horizontally.

• Div 1 is my sidebar

  display:block;
  float:left;
  width:180px;
  height:100%;
  

• Div 2 is the middle (sub-content)

  display:block;
  float:left;
  width:200px;
  height 100%;
  

• Div 3 is the right part

width:100% on Div 3 places it below Divs 1 and 2. How can I make it stretch up the right side of the page instead?

Answer 1

If you don't want to use the calc() function, try the following:

<div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="panel">panel</div>
    <div class="main">main</div>
</div>

.wrapper {
    border: 1px dotted blue;
    height: 400px;
}
.sidebar {
    width: 100px;
    height: 100%;
    background-color: tan;
    float: left;
}
.panel {
    width: 200px;
    height: 100%;
    background-color: pink;    
    float: left;
}
.main {
    width: auto;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

See demo: http://jsfiddle.net/audetwebdesign/6qdYK/

The overflow: auto on .main will keep the div as a column without wrapping around the floated elements, which may be what you need.

Answer 2

The problem occurs because the remaining width isn't 100% but 100% is the width of full window.

So you could use css3 calc() function

.div3{
width: calc(100% - 180px - 200px)
}

See this before using calc() function can i use calc

Or if you want to use the width by calculating yourself define the width in pixel deducting main container width to (180+200)px.

Else, you can define the width auto which might be better for you.