How to make a div fill a remaining horizontal space?

css, html, responsive, width

Solution

This seems to accomplish what you're going for.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Problem

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space. ``` #search { width: 160px; height: 25px; float: left; background-color: #ffffff; } #navigation { width: 780px; float: left; background-color: #A53030; } ``` ``` <div id="search">Text</div> <div id="navigation">Navigation</div> ```

Original source

Related problems