CODEWITHSUNDEEP
csshtmlparent
wholladay
wholladay

Reputation: 1468

Parent div doesn't include all children

I have a content div, that has a header div, which contains two other divs, and then a final div that is not in the header, but is in the content. However, it looks like the last child div of content is not actually contained in the content.

Here is the CSS:

div.outline {border: 1px solid red;}
#content{background-color:tan;}
#container{width:680px;overflow:hidden;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
.clear_it{clear:both;}
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

Here is the HTML:

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
        <div class="clear_it"></div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div class="clear_it"></div>
        <div id="img"></div>
    </div>
</div>

Here is the result:

results

Upvotes: 2

Views: 4659

Answers (5)

dash
dash

Reputation: 91472

Your problem is that you have child elements that are floated, in a parent element that isn't floated. In this instance, the children, although contained by the parent, will not be "aligned" with it, as they aren't in the same "positioning" hierarchy.

I've set up a JSFiddle: http://jsfiddle.net/M2pMh/6/

Note the use of float. You can play with this (as in the answers above) to achieve the results you want.

By moving the image div into the area below content, and floating it left, whilst sizing the other elements to fill their parents (and to float), img will now be below the header and content.

Upvotes: 0

bookcasey
bookcasey

Reputation: 40423

You question is not clearly written.

Do you want the tan background to extend up to the image?

Use this:

#content{ overflow:auto; }

Upvotes: 0

Wex
Wex

Reputation: 15695

I'd recommend a different method to clear your floats that doesn't involve any clearing divs (thus removing clear_it altogether). Just add overflow: auto or overflow: hidden to your containers that contain the floated elements:

#content { overflow: auto; }
#container { overflow: auto; }
#content-header { overflow: auto; }

New HTML:

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div id="img"></div>
    </div>
</div>

New CSS:

div.outline {border: 1px solid red;}
#content{background-color:tan; overflow: auto;}
#container{width:680px;overflow:auto;}
#header{margin-bottom:10px; background-color:yellow; overflow: auto;}
#title{float:left;}
#link{float:right;}
#content_header { overflow: auto; }
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

See: http://jsfiddle.net/Wexcode/g7MkN/

Upvotes: 5

omarello
omarello

Reputation: 2693

You need to clear the float. Since your <div id="img"></div> is floated to the left, right after your clear_it div

Take a look at this for some help

Upvotes: 0

Shlomi Komemi
Shlomi Komemi

Reputation: 5545

try to place the div.img above the div.clear_it

<div id="img"></div>
<div class="clear_it"></div>

Upvotes: 1

Related Questions