div inside a div 0 height

Question

I created a div id="A" and div id="B" and placed the latter div inside div A. Div A has a background-color attribute, but the inside div shows up as its own separate div without the A's background-color. I thought a div within a div would take the attributes of parent div. Instead, div A shows up with 0 height on the browser. The divs below follow the same structure and are just named differently: 'AboutPictures'(A) and 'ya'(B)

<div id="AboutPictures">
    <div id="ya">
        <img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <figure>
            <figcaption>Hello I am Edward</figcaption>
        </figure>
    </div>
</div>

CSS:

#AboutPictures {
    background-color: rgb(0,200,255);
    height:100%;
}
#ya{
    float:right;
}
#ya figure{
    float:right;
}

score 2 · Answer 1 · edited May 23 '17 at 11:45

Since your #ya div is floated, the parent div just sees empty content. You need to clear the #AboutPictures div, by applying the clear: both style. See: What is a clearfix?

Working example:

<div id="AboutPictures">
    <div id="ya">
        <img style='border:5px solid #F00' src="https://placehold.it/350x150">
        <div style="clear: both;"></div>
        <figure>
            <figcaption>Hello I am Edward</figcaption>
        </figure>
    </div>
    <div style="clear: both;"></div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Hey there are different possibilities to solve this:

you could add a float: right / left; to your outer div (#AboutPictures)
or you could set it to display: inline-block;

See this fiddle: https://jsfiddle.net/8j2zpfdg/

Another SO answer as reference: How to make div not larger than its contents?

edited May 23 '17 at 12:23

Community

1
1

answered Mar 17 '16 at 15:42

henningmu

36
4

cool, so when you add float to the outer div does how does it recognize there is content within it? – I Like Mar 17 '16 at 16:02
1

When using float on the outer div it behaves like an inline-block. For a more detailed explanation check this [SO Answer](http://stackoverflow.com/a/16568504/5663598) That answer gives even more insights and possible solutions for your problem. Glad I could help you! – henningmu Mar 17 '16 at 17:25

div inside a div 0 height

2 Answers2