tags:

views:

23

answers:

2

Hi,

The following HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
</head>
<body>
    <div style="border: 1px solid blue;">
        <div style="float: left;">
            Expected NPV</div>
    </div>
</body>
</html>

...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).

Is there a way to make this happen w/out removing the float:left?

I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.

+3  A: 

Use overflow:auto; eg. on the container.

Similar problem : http://stackoverflow.com/questions/3921761/floating-image-to-the-left-changes-container-divs-height/3921781#3921781

MatTheCat
+5  A: 

You can give the parent an overflow to take the child's height into account, like this:

<div style="border: 1px solid blue; overflow: auto;">
    <div style="float: left;">
        Expected NPV</div>
</div>

You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.

Nick Craver
Perfect. Thanks!
John
@John - welcome :)
Nick Craver