CODEWITHSUNDEEP
csshtml
Paulo Mu
Paulo Mu

Reputation: 83

Div fill remaining horizontal space

I have this following code:

<div class="parent">
    <ul class="menu">
        <li>this</li>
        <li>width</li>
        <li>is</li>
        <li>dynamic.</li>
    </ul>

    <div class="something">
        <span>so is this</span>
        <table>because of this table.</table>
    </div>

    <div class="fill">
        <span>and so is this. but this guy needs to fill the remaining width.</span>
    </div>
</div>

Image

These 3 items - ul and 2 divs - are aligned side by side, and as you can see, they have dynamic widths. I have to make these 3 items fit inside div.parent, which width is fixed at 1200px.

Currently, I'm using 'float: left;' to align these 3 items side-by-side, and I can use 'display: inline-block;' if necessary [works perfectly]. But I've tried to use some tricks with 'display: table;' for the parent and 'display: table-cell;' for these 3 items, without success.

I need to fill this remaining space on the black div, which is the 'div.fill'. Any ideas?

EDIT2: http://jsfiddle.net/cAs9t/

Upvotes: 8

Views: 9598

Answers (4)

Reggie Pinkham
Reggie Pinkham

Reputation: 12708

Flexbox solution

Note: Add flex vendor prefixes if required by your supported browsers.

.parent {
  width: 1200px;
  display: flex;
}
.menu {
  margin: 0;
}
.menu li {
  display: inline-block;
}
.fill {
  flex-grow: 1;
}
<div class="parent">
  <ul class="menu" style="background: #6cf">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
  </ul>
  <div class="something" style="background: #fd6">
<span>so is this</span>
<table>because of this table.</table>
  </div>
  <div class="fill" style="background: #5c5">
<span>and so is this. but this guy needs to fill the remaining width.</span>
  </div>
</div>

Upvotes: 0

clearfix
clearfix

Reputation: 467

Use display:table for the container and display:table-row for its direct children.

Set height:0 for the divs with variable height and height:auto for the div that should fill the remaining space.

If the container needs a fixed height, whether in pixels or %, you can add a single div with {overflow-y:auto; height:100%} to the horizontal filler and add content within there.

<div style="height:300px; border:1px solid red;padding:2px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
        I take as much space as needed
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px">My parent will fill the remaining space</div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      <p>I take as much space as needed as well</p>
    </div>
  </div>
</div>

Upvotes: 0

otinanai
otinanai

Reputation: 4025

I made the parent display:table and the 3 children as display:table-cell. Now all 3 children fill the width of the parent and you don't need to float any of them. One advantage of this method is that you can utilize vertical-align and also avoid wrapping of blocks when the parent is shorter than the content. In a way, you get all the goodness of a table.

Υou can set the width of the first 2 children and leave the last without specifying width so that it will fill the parent container.

See this demo.

Upvotes: 2

Oriol
Oriol

Reputation: 287970

Demo

Just add

div.fill { float: none; overflow: hidden; }

Where float: none removes the floating (you can also avoid applying float: left to .fill), and overflow: hidden (or anything different than visible) prevent floating elements from overlapping .fill.

Other ways:

  • You could use display: table-cell and display: table, but you couldn't specify which element should grow to fill all remaining space.

  • But if you want full control and want to distribute remaining spaces in a more complex way, you should use Flexboxes.

Upvotes: 8

Related Questions