CODEWITHSUNDEEP
htmlcssheight
user2637015
user2637015

Reputation: 723

Set parent height relative to child height.

In the code below, B1 contains an image and B2 includes an iframe.

The height of B and container is equal to the height of B1, but B2 is overflowing the container, which I don't want. How do I fix this?

<div id="container">
    </div>
    <div id="B">
        <div id="B1">
             <img src="example.jpg" />
        </div>
        <div id="B2">
             <iframe src="example.htm">
                   Your browser doesn't support iframes.
             </iframe>
        </div>
    </div>
</div>

Upvotes: 0

Views: 3991

Answers (1)

NoobEditor
NoobEditor

Reputation: 15891

give container value display:inline-block

and B2, overflow:auto

That should help!!

EDIT

Assuming you container is closed incorrectly, this should be your html markup :

<div id="container">
    <div id="B">
        <div id="B1">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div id="B2">
            <iframe src=""></iframe>
        </div>
    </div>
</div>

and CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:100%;
    height:100%;
}
#B {
    width:100%;
    height:100%;
}

#B1,#B2,iframe,img{
    width:100%;
    height:auto; /*to mainatin height as per requirement */
}

basic demo

Upvotes: 1

Related Questions