Forum Moderators: not2easy
Apologies if this has been discussed before, I'm not 100% sure what to search on regarding this.
When a number of standard imgs placed one after another reach the edge of the page, they wrap so that the new line clears the baseline of the previous image. When a number of divs with "float:left" set reach the edge, they do not clear in the same way - the wrapping one 'catches' against the previous if its height was larger. Here's what I mean (using the Google logo as test img):
<html>
<style>
img{ vertical-align:top; border:1px solid #000}
.test { float:left; width:276px; height:110px; background-color:#00FF00; border:1px solid #000}
</style>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img height="250px" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<hr>
<div class="test">X</div>
<div style="width:627px; height:250px" class="test">X</div>
<div class="test">X</div>
<div class="test">X</div>
</body>
</html>Is there any way of duplicating the img style of clearing/wrapping using a div? thanks!
The only problem is, I don't know a definite height for each image.
Do you know what the technical terms are for the different types of wrapping / baseline clearing imgs & "float:left" divs have?
Perhaps I should describe my intended layout: I have lets say 20 images of variable height/width. I want them to wrap so that they move down onto a lower line when out of horizontal space. This is simplicity itself : dunk them one after another.
But, if I want to include a name for each image aligned to the bottom left corner, things get tricky : floated divs will 'catch' against a taller previous div and not clear to the next line.
Any ideas?
Many thanks!
The thing with images is that they are inline elements with a height + width. Correct me if I'm wrong, but you are not allowed to do this with any other inline elements?
I heard about the CSS2 property "inline-block" but it's not supported yet.
Well thanks again for your time.
I heard about the CSS2 property "inline-block" but it's not supported yet.
It is supported by IE and Opera, though IE requires a a trick to get it to work properly on block level elements, FireFox has it's own
-moz-inline-boxI posted something a while back which might suit? - Centered Floats - Not! [webmasterworld.com] and the sample code in there is possibly going to do what you want - but you will need a width somewhere for FF and I can't vouch for Mac Safari support
also with IE7 out now the trickery as I have it in that post will not be seen by IE7 and it needs to see it so put it in conditional comment instead
the code from previous post with changes for IE7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centered Floats - Not!</title><style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0; background: #00f;}
#container {
background: #fff;
margin: 0 150px;
border: 1px solid #f00;
padding: 5px;
text-align: center; /* this centers individual blocks if there's room in the container */
}.box {
display: inline-block; /* For Opera ~ IE needs some trickery see conditional comment below */
display: -moz-inline-box; /* For FF */
width: 150px;
background: #eee;
margin: 5px;
border: 1px solid #000;
text-align: left; /* to left align text within divs when container has been set to center */
vertical-align: top; /* required for IE and Opera */
}.box div {width: 150px;} /* nested block element required for FF or text runs out of -moz-inline-box */
.box p {margin: 0.5em;}</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
/* IE needs the values given in 2 x separate rules to make it work */
.box {display: inline-block;}
.box {display: inline;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div class="box"><div><p>test<br />test.</p></div></div>
<div class="box"><div><p>test.<br />test.<br />test.<br />test.<br />test.</p></div></div>
<div class="box"><div><p>test</p></div></div>
<div class="box"><div><p>test.<br />test.<br />test.<br />test.<br />test.</p></div></div>
<div class="box"><div><p>test</p></div></div>
<div class="box"><div><p>test</p></div></div>
<div class="box"><div><p>test</p></div></div>
<div class="box"><div><p>test</p></div></div>
<div class="box"><div><p>You have to have the content in these boxes nested<br />inside a nested block element with a width = to the box width or content will overflow in FF.</p></div></div>
</div>
</body>
</html>
the bit I've highlighted red is the bit that might not work for you - but is necessary for firefox.. take the code have a play and let us know what happens with it, and can any mac users test support?
[edited by: SuzyUK at 2:04 pm (utc) on Mar. 7, 2007]
Thanks Suzy, I tried out your script and it works fine. As you say, I would have to specify the width of each .box with the varying images, but this would be possible via PHP or possibly even js.
I tested your script on Safari 1.3.2 and Mac Firefox 1.5.0.1, no problems with either.
It seems a shame to have to target each browser so specifically for what on the surface feels like a very simple layout, but that's life!
Well done for working this out, have a gold star.
regards
Yes it's a real shame firefox doesn't support inline-block.. I wonder why not?
I agree they (inline blocks) would great way to use horizontal real estate, that post was 2 years old.. which is ages ago in design years and I think at the time I thought about it as experimental but as you've reported good mac support it might be worth considering it as layout technique.. hmm
thanks
Suzy
[edited by: Robin_reala at 7:56 am (utc) on Mar. 8, 2007]
-moz-inline-box
