Categories
CSS

Images overflowing the boundaries of a DIV

A new month brought a new problem. I wanted to set up a staff page for a new site, with a box containing a photo and a profile of the person. The photo was floated to one side of the DIV or the other. I used alternating sides, but that's a matter of taste.

The problem was that if the text profile was too short, the image overflowed the bottom boundary of the div, which had a visible border around it.

Some digging around and experimenting revealed a solution.

The trick is to place <div style="clear:both"></div> just before the end of the DIV to clear the float.

Here's the code I wrote for this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.silhouette {
  border: 1px solid silver;
  padding:1em;
  margin-bottom:.5em;
}
.silhouette img {
  border: 1px solid lightgrey;
  padding:2px;
  margin-bottom:.5em;
}
.imgleft {
  float:left;
  margin: 0px 10px 10px 0px;
}
.imgright {
  float:right;
  margin: 0px 0px 10px 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="silhouette">
<img src="" class="imgleft" /><p>Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgright" /><p>Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at.  Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci.  Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. </p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgleft" /><p>Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgright" /><p>Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>

And the final result:

Note that the image files are not actually shown.

Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

[ad]

Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit.

Leave a Reply