Elements not displayed in line

[OfficeAnimal]

I am working in HTML 4.01 Strict and CSS 2.0. I have:

CSS:---------------------------------------
#top-left-corner { float: left; }

#top-right-corner { float: right; }

#top-bar
{
width: 100%;
height: 14px; /* tight around the GIF */
float: left;
}

#top-bar img { display: block; }

#top-bar-inner
{
width: 100%;
height: 6px; /* match depth of curve */
float: left;
color: #993300; /* dark brown */
background-color: #993300; /* dark brown */
}
CSS:-----------------------------------------------

HTML:----------------------------------------------

<div id="top-bar">
<div id="top-left-corner">
<img
src="img/curve-top-left-993300-darkBrown-radius14.gif"
width="14px"
height="14px"
alt="">
</div>

<div id="top-bar-inner"></div>

<div id="top-right-corner">
<img
src="img/curve-top-right-993300-darkBrown-radius14.gif"
width="14px"
height="14px"
alt="">
</div>
</div>
HTML:-----------------------------------------------

My idea is that the images should appear at either side of top-bar and top-bar-inner should fit neatly between them. However, the bits are displayed in three rows.

How can I get top-bar-inner to appear between the images?

All and any help appreciated.

 

[Vragabond]

I do not understand your logic... if #top-bar-inner takes up 100% of the container, how do you expect two 14px wide images will also fit into it? Do you think your container is 100% + 28px wide?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[OfficeAnimal]

The logic is that I do not know how to set the width of top-bar-inner to "100% - 28px". Do you? I'd love to know how to do it.

Thanks

 

[Vragabond]

You can't. If you do it differently, you may leave the width blank (will be calculated automatically) and add 14px margins on each side. That's how it would be normally done. Note though that this will not work with floating. In that case your middle column would not be floated and would appear last in the code. For the issue in question, I think this would work well.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

It looks like you're (rather badly) adapting a table-based approach to getting rounded corners to use <div>s and floats instead of <td>s.

There are so many better ways to do it - here are 25 to get you started...

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[OfficeAnimal]

Thanks, fellas.

That gives me plenty to work on.

Much appreciated