View Full Version : How to make an aligned image extend div

03-04-2009, 09:23 PM
Hi everyone, sorry for all the posts about floats and divs but here goes another one. I have a picture right aligned inside a div (http://tstcareertech.org/autobody.html). In FF (and probably a bunch of other browsers) the div container does not respect the height of the image inside it when the content is not as tall as the image. How can I get the container to not collapse below the image?

03-04-2009, 09:26 PM
It's called clearing floats (http://www.quirksmode.org/css/clearing.html). Basically you add overflow:auto; to the div you want to wrap around your floated content.

Also note:

Some browsers also need a width or height for the container div.

03-04-2009, 09:30 PM
Hello again alexmel7

It should be more like this -
#maincontent {
background: #000 url(images/learningbg.gif) no-repeat;
width: 894px;
overflow: auto;

In your version, your telling it to be height:340px; which is not tall enough for it's content.
You need to clear the floats in #wrapper also.

03-04-2009, 09:44 PM
Thanks for the help again. When I added overflow:auto to the "maincontent" div it was adding scrollbars, so I added it to the "welcome" div, which is the div that most immediately contains the one i want to extend, and this seemed to solve the problem.