images floating outside of div "box"

**MattCoops** · 03-25-2008, 08:55 AM

I created a content div that has a border.
I am coding a portfolio page that has image thumbnails with text underneath.
I used the thumbnail method as mentioned on: http://www.alistapart.com/articles/practicalcss/

But my images float outside the div "box".
How do I get them to stop?

Here's the css:

Code:

body {
 color:#333;
 background-color:white;
 margin:20px;
 padding:0px;
 font:11px verdana, arial, helvetica, sans-serif;
 }
h1 {
 margin:0px 0px 15px 0px;
 padding:0px;
 font-size:28px;
 font-weight:900;
 color:#336600;
 }
h2 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px;
 }
h3 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px; 
 }
h4 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px;
 }
p {
 font:11px/20px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 16px 0px;
 padding:0px;
 }
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}
a {
 color:#336600;
 font-size:11px;
 font-family:verdana, arial, helvetica, sans-serif;
 font-weight:600;
 text-decoration:dashed;
 }
a:link {color:#336600;}
a:visited {color:#336600;}
a:hover {background-color:#CCFFCC;}

 
.content {
 position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
 width:auto;
 min-width:120px;
 margin:0px 210px 20px 170px;
 border:1px solid black;
 background-color:white;
 padding:10px;
 z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
 }
 
 
div.float {
  float: left;
  position:relative;
  }
  
div.float p {
   text-align: center;
   }
 
 
#navAlpha {
 position:absolute;
 width:150px;
 top:20px;
 left:20px;
 border:1px dashed black;
 background-color:#CCFF99;
 padding:10px;
 z-index:2;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
 voice-family: "\"}\"";
 voice-family:inherit;
 width:128px;
 }
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:128px;}
  
#navBeta {
 position:absolute;
 width:190px;
 top:20px;
 right:20px;
 border:1px dashed black;
 background-color:#FFCC66;
 padding:10px;
 z-index:1;
/* Again, the ugly brilliant hack. */
 voice-family: "\"}\"";
 voice-family:inherit;
 width:168px;
 }
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

and the html file:

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>This page is troublesome</title>
 
<style type="text/css" media="screen">@import "layout.css";</style> 
</head>
<body>
<div class="content">
<h1>Portfolio</h1>
<p>This is some text</p>
 
 
 
 
<!-- Here's where the trouble starts. The darn images float outside the box. -->
 
<div class="float">
  <img src="images/image1.jpg" 
  alt="first image" /><br />
  <p>This is first image</p>
</div>
 
<div class="float">
  <img src="images/image2.jpg" 
  alt="second image" /><br />
  <p>This is second image</p>
</div>
 
<div class="float">
  <img src="images/image3.jpg" 
  alt="third image" /><br />
  <p>This is third image</p>
</div>
 
<div class="float">
  <img src="images/image4.jpg" 
  alt="fourth image" /><br />
  <p>This is fourth image</p>
</div>
 
</div>
 
 
 
<div id="navAlpha">
 <h2>Another div</h2>
<p>Stuff goes here.</p>
</div>
 
<div id="navBeta">
 <h2>More boxes</h2>
<p>Put more stuff here.</p>
</div>
 
 
</body>
</html>

The images float off the **** box.
Can anyone help with a fix?

**chrishirst** · 03-25-2008, 09:11 AM

"break" the floats with a clearing element before closing the parent container.

**MattCoops** · 11:48 AM

do I need to "clear:left" on each individual image div?
because the parent div is liquid, and with resizing, I never know which image will be left to the outermost right or bottom.

**LadynRed** · 03-25-2008, 01:18 PM

There are a number of methods for clearing floats:
http://css-discuss.incutio.com/?page=ClearingSpace

**MattCoops** · 02:15 PM

Code:

 
#outer { overflow: auto; }

doesn't work

I tried

Code:

 clear:left

with no luck

**MattCoops** · 03-25-2008, 02:23 PM

using this css:

Code:

div.spacer {  clear: both;  }

and adding this html:

Code:

<div class="spacer">
  &nbsp;
</div>

after the opening of the parent container and before the close of it too, only clears vertically but there is still horizontal overflow.

**LadynRed** · 03-25-2008, 02:29 PM

First of all, put the proper dimensions on your <img> tags, it's very sloppy coding to leave it off.
Secondly, when you float a div like that you MUST specific a width.

**MattCoops** · 03-25-2008, 03:31 PM

so because I didn't code out the img width and height attributes I have horizontal overflow?

What do you mean I must specific a width? Where?

**MattCoops** · 04:17 PM

added the attributes and I still get images spilling to the right.
is there a way to add a line return to the div.spacer { clear: both; } ???

I have thumbnails with text underneath all floated left, inside a parent div.
I used: <div class="spacer"> </div> inside the parent div tags (twice).
the   is supposed to create a non-breaking space. And still these images push outside the right boundary. What the hey?

**MattCoops** · 07:36 PM

Here's a live demo of it in action at our travertine tile section.

And here's the css:

Code:

body {
 color:#333;
 background-color:white;
 margin:20px;
 padding:0px;
 font:11px verdana, arial, helvetica, sans-serif;
 }
h1 {
 margin:0px 0px 15px 0px;
 padding:0px;
 font-size:28px;
 font-weight:900;
 color:#336600;
 }
h2 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px;
 }
h3 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px; 
 }
h4 {
 font:bold 12px/14px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 5px 0px;
 padding:0px;
 }
p {
 font:11px/20px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 16px 0px;
 padding:0px;
 }
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}
a {
 color:#336600;
 font-size:11px;
 font-family:verdana, arial, helvetica, sans-serif;
 font-weight:600;
 text-decoration:dashed;
 }
a:link {color:#336600;}
a:visited {color:#336600;}
a:hover {background-color:#CCFFCC;}
 
.pink{
color:#FF99CC;
background-color:#000000;
}
 
.red{
color:#FF3333;
background-color:#000000;
}
 
.orange{
color:#FFCC99;
background-color:#000000;
}
 
.yellow{
color:#FFFF99;
background-color:#000000;
}
 
.green{
color:#CCFF99;
background-color:#000000;
}
 
.blue{
color:#99CCFF;
background-color:#000000;
}
 
.violet{
color:#CC99FF;
background-color:#000000;
}
 
div.spacer {
  clear: both;
  }
 
 
/* All the content boxes belong to the content class. */
.content {
 position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
 width:auto;
 min-width:120px;
 margin:0px 210px 20px 170px;
 border:1px solid black;
 background-color:white;
 padding:10px;
 z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
 }
 
img.floatLeft { 
    float: left; 
    margin: 4px; 
    position:relative;
}
img.floatRight { 
    float: right; 
    margin: 4px; 
    position:relative;
}
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
 
div.float {
  float: left;
  position:relative;
  padding: 3px;
  }
 
div.float p {
   text-align: center;
   }
 
 
#navAlpha {
 position:absolute;
 width:150px;
 top:20px;
 left:20px;
 border:1px dashed black;
 background-color:#CCFF99;
 padding:10px;
 z-index:2;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
 voice-family: "\"}\"";
 voice-family:inherit;
 width:128px;
 }
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:128px;}
 
#navBeta {
 position:absolute;
 width:190px;
 top:20px;
 right:20px;
 border:1px dashed black;
 background-color:#FFCC66;
 padding:10px;
 z-index:1;
/* Again, the ugly brilliant hack. */
 voice-family: "\"}\"";
 voice-family:inherit;
 width:168px;
 }
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

IE 7 sees the site fine. It's IE 6 that sees it funny.
This site's audience is primarily IE users.

**LadynRed** · 03-25-2008, 09:59 PM

Quote:

It's IE 6 that sees it funny.

No big surprise there

You have to defined a width here:

Quote:

div.float {
float: left;
width: 50px;

position:relative;
}

IE6 also does not support child selectors like this one:
body>#navAlpha {width:128px;}

Can we see the REAL stuff somewhere that includes the thumbnails ?
Using that ancient example, with those ugly hacks is dicey.

**MattCoops** · 03-26-2008, 01:56 PM

I have a link in my previous post that takes you right to the floating image area.

**LadynRed** · 03-26-2008, 02:22 PM

Yes, sorry, I missed it last night.

Ok, it's not actually 'spilling' out of the div at all in IE, it's STRETCHING the content div and IE will do this because you have not defined a width for .content. IE does NOT support min-width either, so you have to use conditional comments and a separate CSS file for the hacks necessary to make IE6 behave.

**MattCoops** · 03-26-2008, 02:46 PM

and that would look like?

I'm still new at CSS, never mind coming up with IE6 hacks.

P.S. I don't want the content div to have a fixed width. Those are fluid and lined down center. But I did add width:106px; to div.float

**angele803** · 02:33 PM

In the head of your document, right after you have linked or imported all your other stylesheets, add this:

Code:

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="ie6_specific.css" /><![endif]-->

Then make a stylesheet with the name "ie6_specific.css" (or whatever you want to name it.) This will link a new stylesheet to your document that will only be seen by IE6 or lower. (the "lt IE7" means "less than IE7"). This document will over write any previously defined styles. So if you have div.float{ min-width:400px;} in your main css stylesheet, put something like div.float{width:600px;} in your ie6 stylesheet. If the browser is IE6 or below, the div will have a width of 600px, but everything else will work the way you want.

Also, if you want your layout to be flexible, you should be able to specify a percentage for the width.

**MattCoops** · 03-27-2008, 02:36 PM

that sounds great, but
that content div is fluid, so if someone resizes the window a set width may be larger, and still have same problem.