navigation bar below 2 floats

[Cullen411]

What I am trying to do with the code below is have a logo on the top left hand side and a banner on the top right hand side followed all importantly by the navigation bar with links. My issue is that the navigation bar doesnt directly follow just below the images.

Any advice on how to achieve this and why it happens would be greatly appreciated.


CSS

#container
{
width: 100%;
margin:0;
background-color: #fff;
border:0;
padding:0;
}


HTML
<div id="container">
<div style="margin:0 0 2px 0;">
<img src="images/Logo.gif" alt="image 1" style="float:left;" />
<img src="images/banner.gif" alt="image 2" style="float:right;" />
</div>

<div style="border:solid 1px #FF6600;background:#FF6600;width:100%;height:18px;text-align:center;margin:2px;padding:1px;">
<a href="/index.asp">Home</a>&nbsp;&nbsp;&nbsp;<a href="/articles/default.asp">Articles</a>
</div>

</div>

Thanks

 

[BillyRayPreachersSon]

At a guess, try changing your navigation HTMl to be:

<div [COLOR=red]id="navbar"[/color] style="border:solid 1px #FF6600;background:#FF6600;width:100%;height:18px;text-align:center;margin:2px;padding:1px;">
<a href="/index.asp">Home</a>&nbsp;&nbsp;&nbsp;<a href="/articles/default.asp">Articles</a>
</div>

and add some more CSS:

div#navbar {
   clear: both;
}

Hope this helps
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]