How to take up all available space

Question

I want #x to take up all available space. How do I do this?

(P.S. sorry for the mspaint)

Answer 1

try this

http://jsfiddle.net/bAJpz/4/

CSS

 #contentwrapper {
        height: 100%;
        position: absolute;
    }
    #a, #rw, #x {
        position: relative;
        float: left;
    }
    #a {
        border: #ED1C24 3px solid;
        display: inline-block;
        width: 200px;
        height: 100%;
    }
    #rw {
        display: inline-block;
        border: #FF7F27 3px solid;
        width: 200px;
        height: 50%;
    }
    #x {
        border: #7092BE 3px solid;
        display: block;
        width: 200px;
        height: 50%;
    }

Answer 2

I create one eample for you in jsfiddle use:

position: absolute;
height: 100%;

Answer 3

If u are interested in using % use the following code , else u will have to find the width and height using firebug

   #contentwrapper {
   border: 1px solid blue;
   display: inline;
   float: left;
   height: 100%;
   position: absolute;
   width: 600px;
   }
  #a, #rw, #x {
   float: left;
   position: relative;
  }
  #a {
   border: 3px solid #ED1C24;
   display: inline-block;
   float: left;
   height: 99%;
   width: 200px;
   }
  #rw {
    border: 3px solid #FF7F27;
   display: inline-block;
   float: left;
   height: 70%;
   width: 388px;
  }
  #x {
     border: 3px solid #7092BE;
    display: block;
    float: left;
    height: 27%;
    width: 388px;
   }

Answer 4

As per your image, you require to #x to use the complete height so define the height of #x. Defining the height of each block seperately in pixels (px) or Percentage (%) should resolve your concern.

Answer 5

You want table, not inline-block

Whenever you want some element to take up available space, you should consider display: table as your last resort. inline-block and block elements are useful when dealing with contents that are inside them, but are pretty limited in what they can do in terms of space of its parent container. Elements inside a table naturally fill up available space, making them much easier to work with when trying to achieve some design goals.

You will need a lot of wrappers for this. Let's go through them one by one.

#contentwrapper

We first make #contentwrapper a table and give it 2 cells to create the left and right columns. The left column is where #a is.

<div id="contentwrapper">
    <div id="a"></div>
    <div id="b"></div>
</div>

#contentwrapper {
    display: table;
}

#a {
    display: table-cell;
}

#b {
    display: table-cell;
}

#bcontentwrapper

Now we move on to the right column. Create another table called #bcontentwrapper under #b. Inside this table we will need 2 rows, each containing 1 cell, to construct #rw and #x.

We give #rwwrapper a height of 0 and #xwrapper a height of 100% so that #rw's height would depend on its content and #x will always take up the remaining height of the table.

If you are wondering, setting the height to 0 will not make the row collapse into a horizontal line since the row height has to be at least the height required by its cells, provided you have some content inside. And because rows and cells cannot overflow a table, a row with a positive height plus a row with a 100% height can't actually exceed 100%. The second row is forced to take whatever height is left by the first, giving us just what we need.

<div id="bcontentwrapper">
    <div id="rwwrapper">
        <div id="rw"></div>
    </div>
    <div id="xwrapper">
        <div id="x"></div>
    </div>
</div>

#bcontentwrapper {
    display: table;
}

#rwwrapper {
    display: table-row;
    height: 0;
}

#rw {
    display: table-cell;
}

#xwrapper {
    display: table-row;
    height: 100%;
}

#x {
    display: table-cell;
}

Put them together

We put these 2 tables together and see how it looks.

<div id="contentwrapper">
    <div id="a"></div>
    <div id="b">
        <div id="bcontentwrapper">
            <div id="rwwrapper">
                <div id="rw"></div>
            </div>
            <div id="xwrapper">
                <div id="x"></div>
            </div>
        </div>
    </div>
</div>

Ooops, this looks exactly like the problem we begin with. Are we back to square one?

Don't worry, there is one last trick left. Remember that we want #x to take up the available height? Naturally, you will want to give the table #bcontentwrapper a 100% height so it will fill the entire cell of #b, and thus #x can take whatever is left inside this table.

But this is not quite enough. #b will try adjust its height to accommodate its content instead of taking the same height as #a. If the content in #b is shorter than that in #a, #b will be shorter than #a, leaving the space outside and there will be no available space for #x to consume.

To fix this we give #b a height of 0. This is to replace the default height of auto, which causes it to take the minimum height required by its contents instead of the height of the row it is in (the implicit row for #a and #b). And since the row height has to be at least the height required by its cells, the 0 here allows #b to take as much height as it needs and keeps the heights of #a and #b in sync.

#b {
    display: table-cell;
    height: 0;
}

#bcontentwrapper {
    display: table;
    height: 100%;
}

With everything done, #x can finally take up the available space it has always wanted to.

Demo

Here is an interactive demo of the all the things we have discussed so far. The main elements are made contenteditable so you can change the contents and see how the layout adjusts itself.

Caveat

The above solution only works on Firefox, Chrome, Safari and Opera. To make this work on IE, sigh, you need to use a <table>.

<table id="contentwrapper">
    <tbody>
        <tr>
            <td id="a" rowspan="2"></td>
            <td id="rw"></td>
        </tr>
        <tr>
            <td id="x"></td>
        </tr>
    </tbody>
</table>

Click here for the <table> demo. It's ugly, but IE has always been the exception. So whatever.