Div equivalent for table stucture

Hey Everyone,

I want to replace the following code with it's DIV equivalent.
<body> <div id="container"> <div id="header"> <table width="901" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td> </tr> <tr style="padding-bottom:20px"> <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td> <td><img src="images/thinktank.jpg" width="657" height="194" /></td> </tr> </table> </div> </div> </body>

When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.

<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>

Here is some of the CSS: body{ background:#faca0a; background-repeat:repeat-x; background-image:url(images/background.jpg); background-position: top; } div#container{ font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#660033; margin-left:50px; margin-right:50px; padding:0px; background-color: #660066; text-align: justify; top: 0px; } #header { padding-left: 20px; padding-bottom: 10px; }

Reliable

Junior Poster

152 posts since Jul 2007

Reputation Points: 11

Solved Threads: 3

2 Years Ago

If you are expecting the background color to fill the div around the edge of the square image, you need some padding.

If you expect the background color to fill in around an irregularly shaped object in the image, you have to do one of two things, because all images are rectangular:

1. Make the outside edge of the image the same color as the background.

2. Use a .gif file, and make the outside edge of the image transparent. Then the background color will show through.

If the outside edge of the image is white, it will show up as white.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

Hey Everyone,

I want to replace the following code with it's DIV equivalent. <body> <div id="container"> <div id="header"> <table width="901" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td> </tr> <tr style="padding-bottom:20px"> <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td> <td><img src="images/thinktank.jpg" width="657" height="194" /></td> </tr> </table> </div> </div> </body>

When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.
<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>
Here is some of the CSS: body{ background:#faca0a; background-repeat:repeat-x; background-image:url(images/background.jpg); background-position: top; } div#container{ font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#660033; margin-left:50px; margin-right:50px; padding:0px; background-color: #660066; text-align: justify; top: 0px; } #header { padding-left: 20px; padding-bottom: 10px; }

I invite you to examine this example http://www.daniweb.com/forums/post948604.html#post948604

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

I invite you to examine this example http://www.daniweb.com/forums/post948604.html#post948604

But I'm sure you already did that with no avail.Here is my valid cross-browser working code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Table Emulator</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">
*{border:none; padding: 0; margin: auto; overflow: auto}
div, span {border: solid 1px gray}
span {display:inline-block; vertical-align: middle;}
</style>

</head>

<body>
<div id="header" style="width: 901px;">
   <div>
   <span style="height:30px; display:block">
   your content here
   </span>
   </div>
   <div>
   <span style="height:50px; width: 150px;">
   your content here
   </span><span style="height: 194px; width:657px;"> <!-- prevent white-space addition on non-IE agents -->
   your content here
   </span></div>
</div>

</body>
</html>

Advice:
As you already know, -for png transparent images on IE, you will need alphaImageLoader. See my strategy of using AIL in cross-browser compatible way on a document that validates in both tests here : http://www.daniweb.com/forums/post950195.html#post950195

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

This article has been dead for over three months

You