July 6, 201016 yr hi guys Just wondering if someone can help me im designing a site at the moment but im having a bit of a problem i have section in it that when i float it in my css it moves out of my container, yet when i take the float style out it goes back inside my container, can anyone tell me why. heres my code and css if it help <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Speedsters</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="top_nav"> <ul> <li><a href="#">SPEEDSTERS</a></li> <li><a href="#">CALL OF DUTY:MW2</a></li> <li><a href="#">CALL OF DUTY: BLACK OPS</a></li> <li><a href="#">BATTLEFIELD: BAD COMPANY 2</a></li> <li><a href="#">F1 2010</a></li> <li><a href="#">CRYSIS 2</a></li> </ul> </div> <div id="container"> <div id="main_nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ADMIN</a></li> <li><a href="#">SERVER</a></li> <li><a href="#">DOWNLOADS</a></li> <li><a href="#">FORUM</a></li> <li><a href="#">ULTRASTATS</a></li> </ul> </div> <div id="video"></div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-family:tahoma; font-size:12px; background-image:url(Images2/bodybg.jpg); } #container{ border:1px solid #FFFF00; width:906px; margin:auto; } #top_nav{ background-image:url(Images2/top_nav.png); height:33px; } #top_nav ul{ list-style-type:none; text-align:center; } #top_nav li{ display:inline; padding:20px; } #top_nav a{ color:#666666; text-decoration:none; } #top_nav a:hover{ color:#99CC00; } #main_nav{ background-image:url(Images2/main_nav.png); height:37px; width:906px; } #main_nav ul{ list-style-type:none; text-align:center; padding-top:10px; } #main_nav li{ display:inline; padding:40px; } #main_nav a{ color:#666666; text-decoration:none; } #main_nav a:hover{ color:#99CC00; } #video{ background-image:url(Images2/video.png); width:588px; height:335px; margin-top:10px; } thanks guys
July 6, 201016 yr I havent read all your code, but can it be that you haven't added overflow: hidden to the containing div?
July 6, 201016 yr Author its my video section mate, ive put it inside my container in the html but when i float in my css it moves outside of the container, but when i take the float out of my css it moves back it my container if that makes sense
July 6, 201016 yr its my video section mate, ive put it inside my container in the html but when i float in my css it moves outside of the container, but when i take the float out of my css it moves back it my container if that makes sense in your container change to this #container{ border:1px solid #FFFF00; width:906px; margin:0 auto; } and your #video{ background-image:url(Images2/video.png); width:588px; height:335px; margin-top:10px; margin: 0 auto; float:left; }
July 6, 201016 yr like Mrchristoph said you could add overflow:hidden to the container div or add a clear after your float have a look here link
July 6, 201016 yr Author nope sorry mate its not worked, just cant work it out, ill try the overflow. but thankyou very much mate i appreciate you helping me
July 6, 201016 yr Author yippee the overflow worked thanks everyone for taking the time out to reply and help me
Create an account or sign in to comment