Image overflows <DIV> containers

HTML & CSS
1

Hello–I’m trying to set up a container using <DIV> tags that will expand or contract vertically based on what’s inside. Using the code below, it works for text, but if it’s just an image (or if the image is “taller” than the text), the image overflows the bottom border of the container.

Here’s the CSS:

#container {
 margin-left: 1px;
 width: 700px;
 padding: 10px;
 background-color:#3380CC;
}

#content {
 margin: 0;
 padding: 20px;
 width: auto;
 background-color:#FFFFFF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

img {
 border-style:none;
 border-color: black;
 padding: 20px;
}

Here’s the HTML:


<body>

<div id="container">
  <div id="content">
    <img style="float:left" src="users/136587/en9_1_1/images/Goethe_(Stieler_1828).jpg" width="125" height="154" /><p>Test</p>
  </div>
</div>

</body>

Forgive me if the solution is obvious–I’m just learning CSS.

Thanks!

–J

2

The problem is that you are floating the image. When you float something, it takes it out of consideration for parent container sizes (if the parent doesn’t float). In your case, I think just left aligning the image may give you the result you want without the ugly side effect of floating.

3

Thanks for the suggestion! However, it seems like the image still wants to protrude from the bottom of the container. Here’s the <img> tag with the change so you can see what I did:

<img align="left" src="users/136587/en9_1_1/images/Goethe_(Stieler_1828).jpg" width="125" height="154" />

Any ideas? I’m wondering if it’s the <p> tags that keep the text from running out the bottom of the box, and if so whether I could try putting the IMG in its own <p> tags. Seems like this might cause other problems…

Thanks again, and let me know if you have any other suggestions.

–J

4

Hi,

You just need to clear the float before the closing div of the parent container.

e.g.


<div id="container">
  <div id="content">
    <img style="float:left" src="users/136587/en9_1_1/images/Goethe_(Stieler_1828).jpg" width="125" height="154" /><p>Test</p>
  [B]<div style="clear:both"></div>[/B]
    </div>
</div>

Or depending on the situation you could add this instead:


#content {overflow:auto}

Floats are removed from the flow and will float out of their parents containers unless you have cleared the float with something solid or used one of the many clearing techniques around.

See the faq on floats as it goes into detail on this issue and you will need to understand it fully before you can move on to other things :slight_smile:

Hope that helps :slight_smile:

5

Thanks Paul, that did the trick! I’ll check out the faqs today.

–J

6

I’d personally go with the overflow: hidden; option over adding more markup.