|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
|
|
|
|
|
 |
Re: Image too heigh for a div |
 |
|
 |
|
|
|
 09-23-05 - 12:48 AM 
|
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
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
Re: Image too heigh for a div |
|
|
|
|
|
|
|
09-23-05 - 12:48 AM
|
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>
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
Re: Image too heigh for a div |
|
|
|
|
|
|
|
|
|
Re: Image too heigh for a div |
|
|
|
|
|
|
|
| All times are GMT. The time now is 06:32 AM. |
|
|
|
|
|
| |
|
