View Full Version : 100% div with rounded corners

02-28-2005, 01:07 PM
I've been searching for a solution to this for about a week now so maybe someone can help with this.

I'm trying to create an effect of rounded corners on a page heading so am using 3 divs to do this:

<div class="left"></div>
<div class="centre"><h1>Page header</h1></div>
<div class="right"></div>

with the styles:

background-image: url(images/css/pageHeaderLeft.gif);
background-repeat: no-repeat;
width: 12px;
height: 31px;
float: left;
background-image: url(images/css/pageHeaderCentre.gif);
background-repeat: repeat-x;
padding: 0px 0px 5px 0px;
height: 31px;
width: auto;
border: 1px solid #000000;
left: 0px;
right: 12px;
background-image: url(images/css/pageHeaderRight.gif);
background-repeat: no-repeat;
width: 12px;
height: 31px;
float: right;

The idea is to have the header take up the full 100% of the containing div for that section of the site.

The problems are:
In IE, the right hand side image appears on a line by it's own below the other two. I had thought that setting the float to be 'left' on this would stop it happening but, alas, no.

In Firefox, the items all apear on the same line as desired but the background on the centre div only extends for the length of the text so I'm getting a large white space in the middle.

I tried setting the right hand corner's div tag to float left but all this didn't have any effect in IE other than moving the item to the left of its own line and, in Firefox, closed up the white space but made the image sit to the left.

Setting the width of the centre div to be 100% just puts it on its own line, filling the whole 100% which is also no use.

The middle image has a drop shadow (I'll add that this isn't my design, it's just the spec I've been given) so I can't just use a background colour as the backing of the centre div.

I'm really trying to avoid reverting back to tables to do this so any suggestion would be most welcome.



02-28-2005, 01:16 PM
You may want to take a look at Doug Bowman's article on A List Apart, Sliding Doors of CSS (http://www.alistapart.com/articles/slidingdoors/); look at layering element backgrounds to create a seamless background effect rather then tiling elements next to eachother -which is an exact transposition of how tables used to be employed... ;)

02-28-2005, 03:51 PM
Magic, cheers for pointing that out. Got some ideas from the code and got everything working.