CSS Forum

**MattCoops** · 03-25-2008, 09: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, 10:11 AM

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

**MattCoops** · 12:48 PM

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, 02:18 PM

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

**MattCoops** · 03:15 PM

Code:

 
#outer { overflow: auto; }

doesn't work

I tried

Code:

 clear:left

with no luck

**MattCoops** · 03-25-2008, 03: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, 03: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, 04: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** · 05: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** · 08: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, 10: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, 02:56 PM

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

**LadynRed** · 03-26-2008, 03: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, 03: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** · 03: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, 03: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, 03: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.

**angele803** · 03:59 PM

Add this to your css:

Code:

#content_wrapper{width:100%;}

And wrap it around all of your content divs.

here is what the body would look like

Code:

<body>
<div id="content_wrapper">

<div class="content">
	<h1>Shop for Tile and Stone</h1>
	<p>Click on a category to view selected tiles.</p>
	<h3><a href="#ceramic">Ceramic</a></h3>

	<h3><a href="#porcelain">Porcelain</a></h3>
	<h3><a href="#granite">Granite</a></h3>
	<h3><a href="#travertine">Travertine</a></h3>
	<h3><a href="#marble">Marble</a></h3>
	<h3><a href="#slate">Slate</a></h3>
	<h3><a href="#mosaic">Glass and Mosaics</a></h3>

<br />
	<p><a href="contact.html">Get Samples</a> of the tile you want for your project. Call: <span class="phone">(704)493-7407</span></p>
</div>

<div class="content">

<div class="spacer">
  &nbsp;
</div>
	<h2><a name="ceramic"></a>Ceramic Tile</h2>

	<p>The supreme floor covering. A low maintanence material that will resist dirt and staining. Glazed tiles will not fade, as their colors are permanently engrained into the clays they are fired on. </p>


<div class="float">
  <img src="images/tile/ceramic/AlbertaTierra.jpg" width="99" height="100"
  alt="Alberta Tierra ceramic tile" /><br />
  <p>Alberta Tierra</p>
</div>


<div class="float">
  <img src="images/tile/ceramic/AtlasBeige.jpg" width="100" height="100"
  alt="Atlas Beige ceramic tile" /><br />

  <p>Atlas Beige</p>
</div>


<div class="float">
  <img src="images/tile/ceramic/ColiseumBeige.jpg" width="100" height="100"
  alt="Coliseum Beige ceramic tile" /><br />
  <p>Coliseum Beige</p>
</div>


<div class="float">
  <img src="images/tile/ceramic/ColoradoGrey.jpg" width="100" height="100"
  alt="Colorado Grey ceramic tile" /><br />

  <p>Colorado Grey</p>
</div>


<p><a href="contact.html">Get Samples of ceramic tile</a></p>


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


</div>

<div class="content">

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

	<h2><a name="porcelain"></a>Porcelain Tile</h2>
	<p>A form of <i>ceramic</i> made with denser clays and fired at higher temperatures. For that fact, many are frost proof and are capable of being installed outside, as for patios.</p>


<div class="float">
  <img src="images/tile/porcelain/AfricaAvana.jpg" width="90" height="100"
  alt="Africa Avana ceramic tile" /><br />
  <p>Africa Avana</p>
</div>


<div class="float">
  <img src="images/tile/porcelain/AngkorBianco.jpg" width="100" height="100"
  alt="Angkor Bianco ceramic tile" /><br />
  <p>Angkor Bianco</p>

</div>


<div class="float">
  <img src="images/tile/porcelain/basalto.jpg" width="100" height="100"
  alt="Basalto ceramic tile" /><br />
  <p>Basalto</p>
</div>


<div class="float">
  <img src="images/tile/porcelain/BellagioNoce.jpg" width="100" height="100"
  alt="Bellagio Noce ceramic tile" /><br />
  <p>Bellagio Noce</p>

</div>


<p><a href="contact.html">Get Samples of porcelain tile</a> </p>


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


</div>

<div class="content">

<div class="spacer">
  &nbsp;
</div>
	<h2><a name="granite"></a>Granite Tile</h2>
	<p>Formed from volcanic fire, granite is one of the strongest stones out there. Making it a sound choice to install on counters and floors where there is more traffic and use.</p>


<div class="float">
  <img src="images/tile/granite/chestnut.jpg" width="100" height="100"
  alt="Chestnut granite tile" /><br />
  <p>Chestnut</p>

</div>


<div class="float">
  <img src="images/tile/granite/green_diamond.jpg" width="100" height="100"
  alt="Green Diamond granite tile" /><br />
  <p>Green Diamond</p>
</div>


<div class="float">
  <img src="images/tile/granite/jalor_cafe.jpg" width="100" height="100"
  alt="Jalor Cafe granite tile" /><br />
  <p>Jalor Cafe</p>

</div>


<div class="float">
  <img src="images/tile/granite/java.jpg" width="100" height="100"
  alt="java granite tile" /><br />
  <p>Java</p>
</div>


<div class="float">
  <img src="images/tile/granite/mountain_green.jpg" width="100" height="100"
  alt="Mountain Green granite tile" /><br />
  <p>Mountain Green</p>

</div>


<div class="float">
  <img src="images/tile/granite/new_venezia.jpg" width="100" height="99"
  alt="New Venezia granite tile" /><br />
  <p>New Venezia</p>
</div>

<div class="float">
  <img src="images/tile/granite/shanxi_black.jpg" width="100" height="99"
  alt="Shanxi Black granite tile" /><br />
  <p>Shanxi Black</p>

</div>


<div class="float">
  <img src="images/tile/granite/verde_butterfly.jpg" width="100" height="100"
  alt="Verde Butterfly granite tile" /><br />
  <p>Verde Butterfly</p>
</div>


<p><a href="contact.html">Get Samples of granite tile</a> </p>


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


</div>


<div class="content">

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


	<h2><a name="travertine"></a>Travertine Tile</h2>

<p>The neutral color range of travertine makes for an ideal backdrop for your design ideas; a canvas on which you can create the room of your dreams. And because of its strength and ageless beauty, travertine has become the top selling stones in the industry. Wheteher you're building or remodeling, travertine will help you sculpt a treasure that will last for centuries to come.</p>
	<h2>Finishes Available</h2>
	<ul>
	<li><b>Polished</b> - An elegant, high shine for a more stately and formal apperance.</li>
	<li><b>Honed</b> - A matte finish that softens the stone's appearance, creating a casual atmosphere in any room.</li>

	<li><b>Brushed</b> - An antique finish that gives your room a reserved, old-world ambience.</li>
	<li><b>Tumbled</b> - A finish that offers you an antiqued, ageless style in neutral colors</li>
	</ul>



	
<div class="float">

  <img src="images/tile/travertine/BajaBrushed.jpg" width="99" height="100"
  alt="Baja travertine tile" /><br />
  <p>Baja</p>
</div>

<div class="float">
  <img src="images/tile/travertine/ChiaroHF.jpg" width="100" height="100"
  alt="Chiaro travertine tile" /><br />
  <p>Chiaro</p>
</div>

<div class="float">
  <img src="images/tile/travertine/ClarosSilverTumbled.jpg" width="100" height="99"
  alt="Claros Silver travertine tile" /><br />

  <p>Claros Silver</p>
</div>

<div class="float">
  <img src="images/tile/travertine/Driftwood_brush.jpg" width="100" height="100"
  alt="Driftwood travertine tile" /><br />
  <p>Driftwood</p>
</div>

<div class="float">
  <img src="images/tile/travertine/EfesNoceBU.jpg" width="100" height="100"
  alt="Efes Noce travertine tile" /><br />
  <p>Efes Noce</p>

</div>

<div class="float">
  <img src="images/tile/travertine/JinshanBone_pol.jpg" width="100" height="100"
  alt="Jinshan Bone travertine tile" /><br />
  <p>Jinshan Bone</p>
</div>

<div class="float">
  <img src="images/tile/travertine/JinshanCarmel_pol.jpg" width="100" height="100"
  alt="Jinshan Caramel travertine tile" /><br />
  <p>Jinshan Caramel</p>
</div>

<div class="float">
  <img src="images/tile/travertine/JinshanCcoffee_pol.jpg" width="100" height="100"
  alt="Jinshan Coffee travertine tile" /><br />
  <p>Jinshan Coffee</p>
</div>

<div class="float">
  <img src="images/tile/travertine/JinshanGolden_pol.jpg" width="100" height="100"
  alt="Jinshan Golden travertine tile" /><br />
  <p>Jinshan Golden</p>
</div>

<div class="float">
  <img src="images/tile/travertine/noir.jpg" width="100" height="100"
  alt="Noir travertine tile" /><br />
  <p>Noir</p>
</div>

<div class="float">
  <img src="images/tile/travertine/perlato_pol.jpg" width="100" height="100"
  alt="Perlato travertine tile" /><br />
  <p>Perlato</p>
</div>

<div class="float">

  <img src="images/tile/travertine/SandlewoodTumb.jpg" width="99" height="100"
  alt="Sandlewood travertine tile" /><br />
  <p>Sandlewood</p>
</div>


<p><a href="contact.html">Get Samples of travertine tile</a> </p>


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


</div>


<div class="content">

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

	<h2><a name="marble"></a>Marble Tile</h2>
	<p>A metamorphic rock that contains cyrstalized sediments. Its characteristic swirls and veins bring life and form into the material. Colors range from elegant greens, to classic blacks, whites and cremes. Marble makes any room a classic.</p>

<div class="float">
  <img src="images/tile/marble/BlackPearl.jpg" width="100" height="100"
  alt="Black Pearl marble tile" /><br />
  <p>Black Pearl</p>
</div>


<div class="float">
  <img src="images/tile/marble/CafeEmperador.jpg" width="100" height="100"
  alt="Cafe Emperador marble tile" /><br />
  <p>Cafe Emperador</p>
</div>


<div class="float">
  <img src="images/tile/marble/carrara.jpg" width="100" height="100"
  alt="Carrara marble tile" /><br />
  <p>Carrara</p>
</div>


<div class="float">
  <img src="images/tile/marble/EmpressGreen.jpg" width="93" height="100"
  alt="Empress Green marble tile" /><br />
  <p>Empress Green</p>

</div>


<div class="float">
  <img src="images/tile/marble/ForestBrownPol.jpg" width="100" height="100"
  alt="Forest Brown marble tile" /><br />
  <p>Forest Brown</p>
</div>


<div class="float">
  <img src="images/tile/marble/ForestGreenBrushed.jpg" width="100" height="100"
  alt="Forest Green marble tile" /><br />
  <p>Forest Green</p>

</div>


<div class="float">
  <img src="images/tile/marble/MystiqueDark.jpg" width="100" height="100"
  alt="Mystique Dark marble tile" /><br />
  <p>Mystique Dark</p>
</div>


<div class="float">
  <img src="images/tile/marble/RossoLevantoBrushed.jpg" width="100" height="100"
  alt="Rosso Levanto marble tile" /><br />
  <p>Rosso Levanto</p>

</div>


<div class="float">
  <img src="images/tile/marble/stLaurent.jpg" width="100" height="99"
  alt="St Laurent marble tile" /><br />
  <p>St Laurent</p>
</div>


<div class="float">
  <img src="images/tile/marble/storm.jpg" width="100" height="100"
  alt="Storm marble tile" /><br />
  <p>Storm</p>

</div>


<div class="float">
  <img src="images/tile/marble/sunrise_pol.jpg" width="100" height="100"
  alt="Sunrise marble tile" /><br />
  <p>Sunrise</p>
</div>


<p><a href="contact.html">Get Samples of marble tile</a> </p>


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


</div>

<div class="content">
	<h2><a name="slate"></a>Slate Tile</h2>
	<p>A rustic, earthy stone that is formed in layers. Great for adding depth and texture to walls or floors.</p>

<p><a href="contact.html">Get Samples of slate tile</a> </p>


</div>

<div class="content">
	<h2><a name="mosaic"></a>Glass and Mosaic Tile</h2>
	<p>Glass tile's bright, translucent qualities add luster to spaces like no other tile can. Glass is also stain proof, waterproof and naturally nonporous, making it a terrific choice for any bath or kitchen.</p>
	<p>Details turn a story into an expressive tale. Stone mosaics are created to do just that; Express yet not overwhelm, by adding accents to any space without dominating a room.</p>


<p><a href="contact.html">Get Samples of mosaic tile</a> </p>


</div>


<div class="content">
	<p>Copyright 2006-2008 Cupan Custom Tile and Paint | Charlotte, NC </p>
	<p>phone: <span class="phone">(704)493-7407</span> | <a href="contact.html">contact us</a></p>
</div>
</div>


<div id="navAlpha">
	<h2>All Things Tile</h2>
	<p>
		<a href="services.html">List of Services</a><br />
		<a href="shop.html">Tile Shop</a><br />
		<a href="designs.html">Tile Designs</a><br />

		<a href="benefits.html">Benefits of Tile</a><br />
		<a href="services.html#bath">Bath Remodeling</a><br />
		<a href="services.html#countertops">Granite Counters</a><br />
		<a href="portfolio.html">View Portfolio</a><br />
		<a href="contact.html">Contact Us</a>
	</p>

		<p>Shop for tile:</p>
	<p>
		<a href="shop.html#ceramic">Ceramic Tile</a><br />
		<a href="shop.html#porcelain">Porcelain Tile</a><br />
		<a href="shop.html#granite">Granite Tile</a><br />
		<a href="shop.html#travertine">Travertine Tile</a><br />

		<a href="shop.html#marble">Marble Tile</a><br />
		<a href="shop.html#slate">Slate Tile</a><br />
		<a href="shop.html#mosaic">Glass / Mosaic</a><br />

	</p>
		<p><img src="images/saw.jpg" alt="tile services" /></p>
	<p>Providing solutions for all things tile. We get it done right the first time. If you can dream it, we can make it come true.</p>

	<p><b>(704)493-7407</b></p>
</div>

<div id="navBeta">
	<h2>Tile Designs</h2>
	<p>Give your room a personal touch with a custom tile design or layout pattern. Mix varrying size tiles to add depth and intrigue. Use different tile colors and textures for contrast.</p>
	<p>For ideas for your next tile project, view our <a href="designs.html">tile designs and patterns</a>.</p>

</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-740298-1";
urchinTracker();
</script>
</body>

**MattCoops** · 04:35 PM

but that's adding more markup. Will other browsers still see site the way it is now after adding another div with those attributes?

the #content_wrapper does not solve overflow in ie6.

which div needs to have a width set?

**LadynRed** · 03-27-2008, 09:21 PM

Quote:

Will other browsers still see site the way it is now after adding another div with those attributes?

Yes!

Quote:

which div needs to have a width set?

The content div that's getting stretched.