CODEWITHSUNDEEP
htmlcss
Jake Wilson
Jake Wilson

Reputation: 91193

Image goes beyond container div bounds

Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/

I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.

Why does the div not expand to the full height of the image?

I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0; and float:right, all of which make the containing div not adjust it's height to the image height.

Upvotes: 32

Views: 129867

Answers (5)

tow
tow

Reputation: 569

'Why does the div not expand to the full height of the image?'

Because floats will overlap with blocks, only block formatting contexts contain floats. (You can find a pretty good overview of the whole topic here: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )

On to solve the problem at hand:

The align=right will actually result in the img being float: right (the align attribute is deprecated and css should be used).

To contain the floated image in its parent div you need either have the parent div establish a block formatting context (block formatting contexts enclose nested floats) or explicitly clear the float with an additional element after the img that is styled as a clear: right.

An easy solution to create a block formatting context is to float the parent div as well, although my preferred solution in this case would be to simply set its overflow to hidden (also resulting in a block formatting context).

Check out the updated fiddle http://jsfiddle.net/R4bCy/8/.

Upvotes: 12

but like
but like

Reputation: 193

This is what I believe you want: http://jsfiddle.net/R4bCy/6/

If you wanted the text on the left and the image floated to the right, please do this is your CSS: http://jsfiddle.net/R4bCy/15/

You can also have two divs that have a width of 50% contained within a container div. This will allow you a little more flexibility in your placement of the image because the text and image will each have their own modifiable divs with independent attributes

Upvotes: 1

Afshin
Afshin

Reputation: 4215

.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
​.img{
float:right;
height:auto;
}​

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>​​​​​​​​​​

DEMO

Upvotes: 37

Amien
Amien

Reputation: 974

What you need to do is add after the p tag,

<div style="clear:both;"></div>

Upvotes: 2

quoo
quoo

Reputation: 6307

Whoops, apologies, posted and you edited your question - the align right is floating it I believe (you should instead use float:right and a clearfix of some sort).

example: http://jsfiddle.net/R4bCy/5/

Upvotes: 1

Related Questions