Float:left not shrink-wrapping

HTML & CSS
1

Hi there,

I have a div#slider containing 5 images. The images are floated left, and #slider is floated left. But it’s not shrinking to the size of the images.

I’m pretty sure that float:left will create a shrink-wrap effect, but I get no such effect. Using firebug, I can see that #slider has the float:left attribute attached to it, so I know it’s getting the instruction.

HTML:


<body>
<div id="slider">
<img src="images/052011_030505.jpg">
<img src="images/052011_030515.jpg">
<img src="images/052011_030523.jpg">
<img src="images/052011_030537.jpg">
<img src="images/052011_030551.jpg">
</div>
<div class="cleared"></div>
</body>

CSS:


#slider img{
	float:left;
}

#slider{
	float:left;
}

.cleared{
	clear:both;
}

Have i missed something blindingly obvious, or is the world in fact going mad?

Cheers,
Mike

2

Yes it should. Can you provide a link?

3

yep:

Test Site

cheers…

4

As Eric said your code is working.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#slider{
    float:left;
    border:5px solid red;
}
img{    
    background:red;
    border:1px solid #000;
    float:left;
    width:200px;
    height:200px;
}
</style>
</head>

<body>
<div id="slider">
    <img src="images/052011_030505.jpg">
    <img src="images/052011_030515.jpg">
    <img src="images/052011_030523.jpg">
    <img src="images/052011_030537.jpg">
    <img src="images/052011_030551.jpg">
</div>
<div class="cleared"></div>
</body>
</html>

Of course if the slider width is the same as the containing block then the flkoats will start wrapping at that point.

If you wanted then to extend offscreen into the distance you could do that with a large right negative margin on the slider.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#slider{
    float:left;
    border:5px solid red;
    margin-right:-999em
}
img{    
    background:red;
    border:1px solid #000;
    float:left;
    width:200px;
    height:200px;
}
</style>
</head>

<body>
<div id="slider">
    <img src="images/052011_030505.jpg">
    <img src="images/052011_030515.jpg">
    <img src="images/052011_030523.jpg">
    <img src="images/052011_030537.jpg">
    <img src="images/052011_030551.jpg">
    <img src="images/052011_030505.jpg">
    <img src="images/052011_030515.jpg">
    <img src="images/052011_030523.jpg">
    <img src="images/052011_030537.jpg">
    <img src="images/052011_030551.jpg">
</div>
<div class="cleared"></div>
</body>
</html>
5

Err, if my code is working, then why hasn’t #slider shrunk to the width of the images?

Sorry, I think I’m having one of those days…

6

I thought I explained that in the post above and gave you an example of how to do it. :slight_smile:

If your monitor was over 4000px wide then the floats wouldn’t start wrapping until that point. When you float something it will only line up next to something else unless there is enough room. It won’t suddenly stretch the viewport or the containing block any wider than it is.

The solution as I mentioned above is to add this:


#slider{     float:left;  [B]   margin-right:-999em[/B] }

The margin should be at least as wide enough to cover all your images but not too wide as there are browser limits.

You could also apply a very large width to #slider instead but then you introduce a scrollbar when none may not be needed so the negative margin is best as it allows #slider to grow as required.

7

Ohh. I guess I meant work as in shrink wrap it. Needed my coffee. It shrinked to the size of each image. Thus laying them out vertically. If you want a slider have to do as Paul said. Here are all the demos of such… { visibility: inherit; } CSS Scroller

8

@Paul O’B, yes thanks for taking the time to reply to me Paul, but that’s not what I’m looking to do at the moment. I’m just wondering why, if #slider is floated, it doesn’t shrink to its contents. If I look on my browser I see that #slider is always the width of the window (minus the padding on the body), whereas I want it to be the width of the largest image.

@Eric - no, you were right in the first place, by ‘work’ I mean shrinking. On my browser #slider doesn’t shrink. I’m running the latest version of Chrome on mac os 10.6

9

What are you trying to do then? If you float your slider div it will not always be the width of your window. If you do not float it it will.

10

OK, so I’ve just discovered that if I only have one image in the #div it shrinks to fit.

So, my guess is, actually the div is the width of all the images, which are actually sitting side-by-side in the div, but because they are so big, they are wrapping. Which is exactly what you said earlier Paul.

Thanks for your help, and sorry for messing you guys around. Like I said, one of those days…

11

Ok, I see what you mean now :slight_smile:

However the answer is still the same lol :slight_smile:

Floats will shrink wrap their content and if you have one image then you will see that the float is only as wide as the one image. If you have two images and the combined width of the images is greater than the width of the viewport (or containing block) then the width of the parent float is still stretched wide because although the last float has wrapped it is still always trying to fit on the end. It’s as though it is exerting pressure on the float to be as wide as it can so that it can fit.

If you close the window smaller on my first demo it will make sense because you start with the floats all wrapped by a red border as expected. As you reduce the window each float at the end drops to a new line but the parent float doesn’t suddenly jump to the smaller width it stays at the edge where it was just before the float dropped.

This is the way that floats work although it would be better if the parent shrunk immediately to contain the new width as you would expect. In fact this is what IE6 and 7 do but as usual they are doing it wrong and everyone else is right :slight_smile:

12

Thanks for the info. :slight_smile:

13