CODEWITHSUNDEEP
htmlcss
user1152440
user1152440

Reputation: 905

Internal div Popping Out of Layout

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.

enter image description here

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

Upvotes: 1

Views: 2476

Answers (5)

Zensar
Zensar

Reputation: 817

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.

Upvotes: 3

holycowbatman
holycowbatman

Reputation: 49

remove the "br" betwen your floated elements and add overflow: hidden; to #display.

see this: http://jsfiddle.net/HOLYCOWBATMAN/updZW/

Upvotes: 0

Matt
Matt

Reputation: 1911

Remove the <br>

http://jsfiddle.net/SgEMc/

Upvotes: 0

j08691
j08691

Reputation: 207891

Get rid of the <br /> tag in your code.

You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:

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

jsFiddle example.

Upvotes: 1

Evert
Evert

Reputation: 8541

The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container

http://www.webtoolkit.info/css-clearfix.html

or add a clearing element after your floating elements if you don't mind the extra markup.

<br style="clear:both" />

after your data div.

then if either wraps, the container will stretch to suit the content.

Upvotes: 3

Related Questions