View Full Version : Right floated div breaks background image right edge

11-25-2005, 12:22 AM
I am building a new site where the background is esentially a rounded box, the middle part of the page is just the left and right sides of the box repeated using the div layout-main.

The problem is I float some infomation panes on the right, and the right side of the main 'box' is not shown, if I use a real box ie. border: 1px solid #00000 that shows fine.



Any ideas?

Don't worry I've fixed, I added a 2px right margin to the right hand containter.

Glass Casket
11-25-2005, 03:08 AM
Nice site may I add.

11-25-2005, 11:11 AM
Actually I still have a problem, I have made a few more changes and juist tested in Firefox and I have the same problem as before.

I am using Firefox 1.0.7 Mac version.

Works OK on Safari and Opera 8.5 on the Mac.

Any ideas?

And thanks for you comments! I have loads of work to do yet, the artwork I am using is just temporary to test the layout techniques.

11-25-2005, 03:14 PM
Just tested IE6 PC and it's OK there too.

Any idea for a fix for Firefox rendering?

11-25-2005, 05:16 PM
give the spacer a height:

.spacer {
clear: both;
height: 20px;
background-color: #f3c;

i made it pink so i could see it (you'll probally not want it pink ;) )

p.s. IE will automatically make it 17px hight so you might as well make it that hight as well in your css so it looks the same across the board.

11-25-2005, 07:06 PM
Thanks, that fixed it :)

Want to see a better demo