03-04-2009, 08: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, 08: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.
Some browsers also need a width or height for the container div.
03-04-2009, 08:30 PM
Hello again alexmel7
It should be more like this -
background: #000 url(images/learningbg.gif) no-repeat;
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, 08: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.