I want to place 3 blocks (divs) in a row, both the left and right
blocks have a fixed width, the center block fills a gap between them.
I posted below simplified example. It shows exactly what I want in in
FF, Opera, Safari but in IE the blocks aren't reach each other. Can it
be corrected?
In a real-world task the background of the side blocks is an image
with transparent areas, so the filled(painted) center block should not
stretch below the side blocks.
TIA,
Mykola
http://marss.co.ua
Example.
<html>
<body>
<style type="text/css">
..left
{
width:15px;
height:20px;
background-color: red;
float:left;
}
..right
{
width:15px;
height:20px;
background-color: yellow;
float:right;
}
..middle
{
margin-left:15px;
margin-right:15px;
position:relative;
display:block;
height:40px;
background-color:green;
}
</style>
<div>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
