I'm trying to acheive a 1px border around the container div. I have centered the container div. My CSS code is as follows: body { text-align: center } #container { width: 799px; text-align: left; border: 1px solid #800040; margin: 0 auto } #header { width: 794px; height: 122px; float: left} #content { width: 799px; height: 46px; float: left } #leftcol #rightcol ... Code (markup): This should work with the CSS I have used - it does in IE but not FF. I noticed however if I change the float on the divs to "center" it displays the border, but the problem is I have some divs that do need to be float left and float right or else it wont display properly. How can I resolve this problem?
Hi, Do you have the HTML that is causing this problem? The container should have a 1px border round it in all browsers if you state it. Don't forget to add a ; after all of your CSS statements you seem to have left a few out. Also there is no such thing as float: center; you can only float objects to the left or right or state float: none incase it is floated by default.
Try the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> body { text-align: center } #container { width: 799px; text-align: left; border: 1px solid #800040; margin: 0 auto } #header { width: 794px; height: 122px; float: left } #content { width: 468px; height: 46px; float: left } #leftcol { width: 147px; float: left } #rightcol { width: 160px; float: left } </style> </head> <body> <div id="container"> <div id="header"> <a href="/test"> <img id="logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif"/></a> </div> <div id="leftcol"> <p>Menu Bar</p> </div> <div id="content"> <p>Some Content</p> </div> <div id="rightcol"> <img src="/images/advert1.gif" alt=""/> <img src="/images/advert2.jpg" alt=""/> <img src="/images/advert3.gif" alt=""/> </div> </div> </body> </html> Code (markup): Interestingly if I add a 'float: left' to the container div the border shows up! (but the container is floated to the left then :|) If I remove the 'float:left' from '#rightcol' the border shows up, but the content is not displayed in the correct place!
Yes it's because you have items floated inside, and they are not cleared before the container is closed. Floating the parent container as you suggested is one way around it, however as this is not an option in your case as you don't want the parent container floated. See here for more information: http://gtwebdev.com/workshop/floats/enclosing-floats.php You can use the clearfix hack as desribed here: http://www.positioniseverything.net/easyclearing.html Or add an empty clearing DIV although it's not required, and adds unwanted markup so I would go with the clearing hack.
I cant get my head around any of that stuff! Is this a bug in FF, because why do I need to use a 'hack' just to make it display a border around the container div!
Well are you going to have a footer? All you need to do is have a non-floated element before the container DIV is closed afaik.
Right, I understand. Yes I am going to have a footer but I see a problem here... My footer consists of two divs - on the left there is the copyright notice and on the right there are some links. What is the best way to go about this? The clearing hack would have to be a last last resort!
I applied 'overflow: hidden' to the container div and this has done the trick. It also displays properly in IE6.
Woops sorry for misleading you I actually forgot about this, I am also learning nice to know you sorted it out.