ansaurus

Question

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

Answer 1

+2 A:

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 yo uneed them to expand to fill available space you're out of luck.

In fact you're then 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.

cletus 2009-03-08 09:56:04

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 2009-03-08 10:07:09

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 2009-03-08 11:32:01

@Pim: that's the standard I use as well.

cletus 2009-03-08 11:37:24

Answer 2

A:

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>

Guffa 2009-03-08 10:21:11

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 2009-03-08 10:25:10

@cletus: Of course it does. If there is not enough available space, where would the text go?

Guffa 2009-03-08 10:47:13

Answer 3

+1 A:

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.

<html>
<head>
    <style type="text/css">
        .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;
        }
    </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>
    <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>
</body>
</html>

Rich Adams 2009-03-08 10:29:28

Answer 4

+1 A:

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>

Noel Walters 2009-03-08 11:15:34

ansaurus

tags:

views:

answers:

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

related questions