How to replace table row to css

boogily

12-17-2010, 02:50 AM

I have something I wish to display like (simplified)

<div style="width:608px;">
<tr>
<td width=15 height=15>leftimage.png</td>
<td background=#000></td>
<td width=15 height=15>rightimage.png</td>
</tr>
</div>

But in CSS, I always seem to run into the background color issue. The .pngs have to show transparency. The issue is getting the middle layer to stretch via the width of the parent div as well. Either the background color spans everything, ruining my .pngs or it doesn't span dynamically. Tables would work, but I hate tables. I want fully semantic CSS that works with IE even.

Excavator

12-17-2010, 04:05 AM

Hello boogily,
Look at what some margins can do for you - <!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">
html, body {
margin: 0;
background: #FC6;
font: 100% Verdana, Geneva, sans-serif;
color: #999;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
overflow: auto;
font-size: 0.8em;
line-height: 15px;
}
#leftImg, #rightImg {
height: 15px;
width: 15px;
display: block;
}
#leftImg {
float: left;
background: #0f0;
}
#rightImg {
float: right;
background: #fff;
}
#header_content {
margin: 0 15px;
text-align: center;
background: #00f;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="path/to/leftimg.png" alt="description" id="leftImg" />
<img src="path/to/rightimg.png" alt="description" id="rightImg" />
<div id="header_content">
Header stuff in here
</div>
</div>
</div>
</body>
</html>

boogily

12-17-2010, 06:49 AM

Thank you