Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a div fill a remaining horizontal space?

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>
like image 579
alexchenco Avatar asked Jun 23 '09 14:06

alexchenco


People also ask

How do I make a div fill the whole page?

We found a solution! We add position:absolute;height:100%;width:100%; to the body tag and then our div gets on the whole screen without positioning attribute :) just height:100% and width:100%. Thanks to all who participated!

How do you make a space horizontal in HTML?

To create extra spaces before, after, or in-between your text, use the &nbsp; (non-breaking space) extended HTML character.


2 Answers

The problem that I found with Boushley's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of 'solutions' I found a tutorial (now link is dead) on creating three column pages.

The author offer's three different ways, one fixed width, one with three variable columns and one with fixed outer columns and a variable width middle. Much more elegant and effective than other examples I found. Significantly improved my understanding of CSS layout.

Basically, in the simple case above, float the first column left and give it a fixed width. Then give the column on the right a left-margin that is a little wider than the first column. That's it. Done. Ala Boushley's code:

Here's a demo in Stack Snippets & jsFiddle

#left {    float: left;    width: 180px;  }    #right {    margin-left: 180px;  }    /* just to highlight divs for example*/  #left { background-color: pink; }  #right { background-color: lightgreen;}
<div id="left">  left  </div>  <div id="right"> right </div>

With Boushley's example the left column holds the other column to the right. As soon as the left column ends the right begins filling the whole space again. Here the right column simply aligns further into the page and the left column occupies it's big fat margin. No flow interactions needed.

like image 101
Hank Avatar answered Sep 21 '22 11:09

Hank


These days, you should use the flexbox method (may be adapted to all browsers with a browser prefix).

.container {     display: flex; }  .left {     width: 180px; }  .right {     flex-grow: 1; } 

More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

like image 35
Jordan Avatar answered Sep 20 '22 11:09

Jordan