471,570 Members | 937 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,570 software developers and data experts.

Failed to place 3 blocks in a row

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>

Nov 9 '07 #1
0 1554

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Robert Schneider | last post: by
reply views Thread by Nicolas Noakes | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.