Stylesheets - Image too heigh for a div

Author

Image too heigh for a div

Van der Weij

2005-09-22, 7:48 pm

Hi,

I placed an image inside a div with a small paragraph of text, but now
the div doesn't contain the image (the image strechtes below the border of
the div).
See screenshot at http://www.vanderweij.demon.nl/screen.jpg.

Is there a way to fix this?

Adding a <div spacer> (with clear: both set) doesn't work because then the
item
will be stretched past the left menu.

I have the following page setup (pseudocode):

<div left float>
menu
</div>

<div right float>
calendar
</div>

<div mainpage>

<div item>
<img src=... >
Some text
</div>

<div item>
Some text
</div>

</div>

With best regards,

Rik van der Weij

Els

2005-09-22, 7:48 pm

Van der Weij wrote:

> Hi,
>
> I placed an image inside a div with a small paragraph of text, but now
> the div doesn't contain the image (the image strechtes below the border of
> the div).
> See screenshot at http://www.vanderweij.demon.nl/screen.jpg.

Screenshots don't help in fixing problems, post a link to the actual
problem page next time.

> Is there a way to fix this?

Yes.

> Adding a <div spacer> (with clear: both set) doesn't work because then the
> item will be stretched past the left menu.

That's cause your left menu is floated too.

There are a couple of ways to counter this effect, one of which is
setting a width or height to the containing div (the one the image and
text are in), for Win-IE only (must not be seen by non-IE or Mac-IE!).
A 1px height already does the trick. Win-IE will then automatically
stretch the div to encompass the floated image. For Gecko browsers,
you can use the clear:both method. IE mustn't see it though, so
something like this would work:
div.item p:after{
content:".";
display:block;
clear:both;
font-size:1px;
line-height:1px;
}

Must use a <p> around your text though, so like this:
<div item>
<img src=... >
<p>Some text</p>
</div>

Another option, is to float the image to the right, and use
clear:right instead of clear:both on a spacer div like you initially
had. Won't work if you have a floated right bar of course :-)

Yet another option, and the one I like best, is to float the entire
content area too. This because clear properties inside floats don't
"see" floats outside those floats. Does need some trickery if you want
to maintain a flexible width for the content area though.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Blondie - Rip Her To Shreds

Van der Weij

2005-09-22, 7:48 pm

A test page to show the problem:
URL http://www.vanderweij.demon.nl/div.html

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Testpage</title>
<style>
body {
width: 40em;
margin: 5px auto;
color: #ccc;
}

h1, h2, .mark {
color: #000;
}

#leftcontent, #rightcontent, #centercontent, #header, #footer {
border: 1px solid #aaa;
margin: 5px;
}

#content {
border: 1px solid #f00;
}

#header {
background: #ffc;
height: 3.8em;
}

#centercontent {
margin-left: 10em;
margin-right: 10em;
}

#leftcontent {
float: left;
width: 9em;
}

#rightcontent {
float: right;
width: 9em;
}

.spacer {
clear: both;
}

.item {
border: 1px solid #009;
margin: 5px;
}

.item img {
float: right;
}
</style>
</head>

<body>

<div id="content">

<div id="header">
<h1>Header block</h1>
</div>

<div class="spacer"></div>

<div id="leftcontent">
<h2>Menu block</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<div id="rightcontent">
<h2>Events block</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<div id="centercontent">
<div class="item">
<h1>Intro</h1>
<span class="mark">Floating page layout. Beforehand, the height of these
boxes is unkown.</span>
</div>

<div class="item">
<h1>Problem</h1>
<img src="test.jpg" width="200" height="200">
<span class="mark">The image should be contained inside this box.</span>
</div>

<div class="item">
<h1>Item</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</div>

<div class="spacer"></div>

</div>

<div class="spacer"></div>

<div id="footer">
<h2>Footer block</h2>
</div>

</body>

</html>

Els

2005-09-22, 7:48 pm

Van der Weij wrote:

> A test page to show the problem:
> URL http://www.vanderweij.demon.nl/div.html

Have you tried any of my suggestions yet? Posted about one hour ago,
in reply to your first post.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dave Edmunds - Crawling From The Wreckage

Van der Weij

2005-09-22, 7:48 pm

>> Is there a way to fix this?
>
[ earlier options ]
Rejected, I have right float, and I really don't like IE and FF only
options.
>
> Yet another option, and the one I like best, is to float the entire
> content area too. This because clear properties inside floats don't
> "see" floats outside those floats. Does need some trickery if you want
> to maintain a flexible width for the content area though.
>

Tried this option, seems reasonable, apart from hard to calculate width.
http://www.vanderweij.demon.nl/div2.html
(eg borders: 1px, width in em)

Rik

Van der Weij

2005-09-22, 7:48 pm

> http://www.vanderweij.demon.nl/div2.html
> (eg borders: 1px, width in em)
>

Great, now Internet Explorer renders my border wrong. (Parts are missing)
Live page in action:

http://www.schaakmat.nu (scroll a bit and look at left and right blue
borders)