Question

I have a layout issue where the internal div “data” seems to be popping out of its containing div and showing outside. I’ve placed coloured borders around the bottom picture and the problem I’m having is the yellow text should be in the white box, but it’s not. Anyone know what the issue is here I’m currently stumped. I’ve tried using clear:both but it didn’t seem to work.

.whiteContainer
        {
        border: 1px dotted red;
            margin:3%;
            background: white;
            border-radius: 15px;
        }
#display
        {
        border: 1px dotted green;
            margin:3%;
        }
.header
        {
        border: 1px dotted blue;
            float:left;
        }
.data
        {
        border: 1px dotted yellow;
            float:right;
        }

HTML portion:

<div class="whiteContainer">
    <div id="display">
        <div class='header'>Program Name: </div>
        <br />
        <div class='data'>
            Strategic Project Grants
        </div>
    </div>
</div>

EDIT:

removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can’t specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.

Answer 1

Set the parent container of the data (id=display) to “overflow:hidden” or “overflow:auto”. It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks – All About Floats, there is a section about clearing floats.