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.

**LadynRed** · 03-27-2008, 02:41 PM

Then it sounds like you need a different solution. You just can't have it both ways, you either do what it takes to make IE stop stretching the div, give up on IE6 entirely and warn your visitors, or you find another solution.

Quote:

W3C's Cascading Style Sheets, level 2, CSS2 Specifications states: "A floated box must have an explicit width..."
If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.

03-25-2008, 09:11 AM	#2 (permalink) Re: images floating outside of div "box"
chrishirst Super Moderator Posts: 10,551 Location: Blackpool. UK Talkupation:	"break" the floats with a clearing element before closing the parent container. __________________ Chris. ->> Links are advertising NOT optimising!! <<- Indifference will be the downfall of mankind, but who cares? Code Samples \| People Counting System

03-25-2008, 11:46 AM	#3 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	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. __________________ Matt Cupan Custom Tile and Paint charlotte tile Last edited by MattCoops : 03-25-2008 at 11:48 AM.

03-25-2008, 01:18 PM	#4 (permalink) Re: images floating outside of div "box"
LadynRed Super Moderator Posts: 5,518 Location: Tennessee Talkupation:	There are a number of methods for clearing floats: http://css-discuss.incutio.com/?page=ClearingSpace __________________ Web Goddess & Web Standards Evangelist :) - Tables Be Gone !! "Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"

03-25-2008, 02:07 PM	#5 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	Code: #outer { overflow: auto; } doesn't work I tried Code: clear:left with no luck __________________ Matt Cupan Custom Tile and Paint charlotte tile Last edited by MattCoops : 03-25-2008 at 02:15 PM.

03-25-2008, 02:23 PM	#6 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	using this css: Code: div.spacer { clear: both; } and adding this html: Code: <div class="spacer">   </div> after the opening of the parent container and before the close of it too, only clears vertically but there is still horizontal overflow. __________________ Matt Cupan Custom Tile and Paint charlotte tile

03-25-2008, 02:29 PM	#7 (permalink) Re: images floating outside of div "box"
LadynRed Super Moderator Posts: 5,518 Location: Tennessee Talkupation:	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. __________________ Web Goddess & Web Standards Evangelist :) - Tables Be Gone !! "Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"

03-25-2008, 03:31 PM	#8 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	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? __________________ Matt Cupan Custom Tile and Paint charlotte tile

03-25-2008, 03:38 PM	#9 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	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? __________________ Matt Cupan Custom Tile and Paint charlotte tile Last edited by MattCoops : 03-25-2008 at 04:17 PM.

03-26-2008, 01:56 PM	#12 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	I have a link in my previous post that takes you right to the floating image area. __________________ Matt Cupan Custom Tile and Paint charlotte tile

03-26-2008, 02:22 PM	#13 (permalink) Re: images floating outside of div "box"
LadynRed Super Moderator Posts: 5,518 Location: Tennessee Talkupation:	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. __________________ Web Goddess & Web Standards Evangelist :) - Tables Be Gone !! "Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"

03-26-2008, 02:46 PM	#14 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	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 __________________ Matt Cupan Custom Tile and Paint charlotte tile

03-27-2008, 02:31 PM	#15 (permalink) Re: images floating outside of div "box"
angele803 Perfectly Imperfect Posts: 1,322 Name: Stephanie Location: Oklahoma Talkupation:	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. __________________ Webmaster-Talk Rules Decorate My Web - My Site Last edited by angele803 : 03-27-2008 at 02:33 PM.

03-27-2008, 02:36 PM	#16 (permalink) Re: images floating outside of div "box"
MattCoops Ultra Talker Posts: 331 Name: Matt Cupan Location: Charlotte, NC Talkupation:	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. __________________ Matt Cupan Custom Tile and Paint charlotte tile

03-27-2008, 02:58 PM	#18 (permalink) Re: images floating outside of div "box"