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>

Answer 1

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.

Answer 2

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>