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

Question

How can I get the right floating DIVs to fill their available space?

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

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

        .content .rightSide {
            background-color: orange;
            float: left;
            width: *;
            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 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>

INTERMEDIATE ANSWER:

Thanks Guffa and Rich, taking float:left off the right side allowed the text to be centered, but to get the background color to extend down, I had to also make the background color of the parent DIV.

However, I still can't get the text to align in the middle vertically since the DIV doesn't actually go all the way down, is there an "auto" for that too? e.g. height:*, or float-down:auto? As Cletus mentioned below, this would all be trivial in HTML tables, the CSS designers surely included some property to "make the vertical space fill downward".

alt text http://tanguay.info/web/external/cssRightFixed.png

.content{
          background-color: orange;
          margin: 0px auto;
          width: 760px;
       border: 1px solid blue;
       font-size: 10pt;
      }
      
      .content .leftSide {
       background-color: yellow;
       float: left;
       padding: 5px;
      }
      
      .content .rightSide {
       background-color: orange;
       padding: 5px;
       text-align: center;
       vertical-align: middle; 
   /* DOESN'T WORK SINCE THE DIV DOES
      NOT ACTUALLY GO ALL THE WAY DOWN */
      }

<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">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>

score 18 · Accepted Answer · edited May 23 '17 at 11:54

18

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:

Fix the size of the floats; or
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.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 08 '09 at 09:56

cletus

616,129
168
910
942

1

thanks, my thoughts exactly, I'm actually waiting for an anti-table pure-CSS fanatic to just show me how to do this, there's got to be a relatively harmless CSS hack to "center text" and "provide a background color". – Edward Tanguay Mar 08 '09 at 10:07
1

Arr, tables, arrr. No just kidding. Always try using divs and css positioning. But when that would make things extremely complicated, then use tables. – Pim Jager Mar 08 '09 at 11:32
@Pim: that's the standard I use as well. – cletus Mar 08 '09 at 11:37
I'm not necessarily an anti-table pure-css fanatic, but you can easily center elements inside a parent using the same method bootstrap uses to center modals. You have to know the dimensions of the element you are trying to center, but you don't need to know the parent's dimensions. http://jsfiddle.net/JGSBJ/1/ – Bobby Aug 22 '12 at 17:42
For layout divs are dead end. Use tables but don't over do it. – Anderson Jul 15 '13 at 21:53

score 3 · Answer 2 · edited Jan 22 '20 at 10:31

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>

Noel Walters · Answer 3 · 2009-03-08T11:22:13.933

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>

Guffa · Answer 4 · 2009-03-08T10:37:01.530

Just remove the float:left; in the .rightSide class (and the width:*;).

The default width for a div is auto, which makes it use the available width.

Edit:
Here is the code with the change:

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

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

        .content .rightSide {
                background-color: orange;
                padding: 5px;
                text-align: center;
        }
    </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>
</body>

</html>

Actually that doesn't work. The leftside div is then sitting on top of part of the rightside div (shrink content's width and you'll see the text go under). This makes the content centered within content, not the available space. — cletus, Mar 08 '09 at 10:25
@cletus: Of course it does. If there is not enough available space, where would the text go? — Guffa, Mar 08 '09 at 10:47

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

INTERMEDIATE ANSWER:

4 Answers4

Linked