How to get a floating-DIV to fill available space within its parent DIV?

If you use floats, you pretty much need to give them widths. Floats are fine if you specify the width or you're happy with whatever the browser calculates as the minimum required width. As soon as you need them to expand to fill available space you're out of luck.

In fact you're using the wrong tool.

So you have two possibilities:

  1. Fix the size of the floats; or
  2. Use a table.

With tables this is a trvial problem to solve (waits for the anti-table pure-CSS fanatics to go nuts).

EDIT: Ok, you want to do verticall centering as well. Now you're really in trouble. See Can you do this HTML layout without using tables? for how hard even simple layout can be with pure CSS, particularly when you want to do vertical centering (when the container or the child aren't fixed height) or side by side content.

Again, tables make this trivial with vertical-align: middle.

If you want more information on vertical centering with pure CSS, see:

  • Vertical Centering in CSS: three levels of nested divs... just to get vertical centering;
  • How to: vertical centering with CSS; and
  • Vertical centering with CSS.

This should do what you want. There's no need to float the right hand side if you're also floating the left. Just let the right hand side be as normal and it will fill the available space by default.

 .content{
          background-color: orange;
          margin: 0px auto;
          width: 760px;
          border: 1px solid blue;
          font-size: 10pt;
          overflow: auto;
  }

  .content .leftSide {
          background-color: yellow;
          float: left;
          padding: 5px;
  }

  .content .rightSide {
          padding: 5px;
          text-align: center;
  }
<div class="content">
    <div class="leftSide"><img src="test.jpg"/></div>
    <div class="rightSide">Right side text should be centered.</div>
</div>
<div class="content">
    <div class="leftSide"><img src="test2.jpg"/></div>
    <div class="rightSide">And the background should fill the DIV of course.</div>
</div>

I tend to agree with the "use a table" advocates, but after messing around for a while (in a not really knowing what I'm doing kind of way) I came up with this variation which fixes the vertical align problem in Firefox, Safari, Chrome, etc and doesn't make it any worse in IE.

(my changes are on the lines that are less indented)

<html>
<head>
    <style type="text/css">
        .content{
                background-color: orange;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
            display:table;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
            border:1px solid black; /* for debugging */
            display:table-cell;
            width:100%;
                background-color: orange;
                padding: 5px;
                text-align: center;
                vertical-align: middle; /* DOESN'T WORK IN IE */
        }
      .content .text {
          width:150px;
      }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test3.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
      <div class="leftSide text">this is a text on the left with no image</div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>

Tags:

Css

Recent Posts