# Css columns float

**URL:** https://forum.kirupa.com/t/css-columns-float/219204
**Category:** Uncategorized
**Created:** [March 14, 2007, 6:17pm UTC](https://forum.kirupa.com/t/css-columns-float/219204 "2007-03-14T18:17:34Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![rangerkev](https://avatars.discourse-cdn.com/v4/letter/r/f17d59/32.png) [@rangerkev](https://forum.kirupa.com/u/rangerkev)
#### Post date: [March 14, 2007, 6:17pm UTC](https://forum.kirupa.com/t/css-columns-float/219204/1 "2007-03-14T18:17:34Z")

</div>

Hey everyone,

I am pretty new to css (and this forum). I am trying to have a bar along the top of my page (with round edges and a gradient) that will adjust based on browser window. There are 3 images, topleft, middle, and top right. I have gotten the topleft and middle images to line up side by side perfectly, but the topright image keeps dropping down. Here is the CSS code:

#topleft {  
background-image:url(images/topleft.gif);  
background-repeat:no-repeat;  
height:72px;  
width:28px;  
float:left;  
}  
#middle {  
background-image:url(images/middle.gif);  
background-repeat:repeat-x;  
background-position:right;  
height:72px;  
width:inherit;  
margin-left:28px;  
margin-right:28px;  
}  
#topright{  
background-image:url(images/topright.gif);  
background-repeat:no-repeat;  
width:28px;  
height:72px;  
float:right;  
}

any thoughts? thanks