Hey. I have try with float and line-height, but support and help + other will not be in the same height as information. Whats wrong? Picture: http://i.imgur.com/EWs9JyX.png Html <!DOCTYPE HTML> <html> <head> <title>x.com - Free videos, pictures and socialnetwork.</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <meta charset="UTF-8"> <meta name="description" content="Free porn videos and pictures"> <meta name="keywords" content="porn, hot, girls, sexy, pictures, videos"> <meta name="author" content="x"> </head> <body> <div id = "head"> <div id = "titletext"><a href="#">x</a></div> <div id = "search"><a href="#"><img src="pic/glas.png" style="width: 35px; height: 35px; float: right; line-height: 200%;" /></a><input type="text"></div> <div id = "meny"> <a href="#">Home</a> <a href="#">Account</a> <a href="#">Videos</a> <a href="#">Pictures</a> <a href="#">Forum</a> </div> </div> <div id = "content">Welcome</div> <div id = "footer"> <div id="f1">Information<br> <a href="#">News</a><br> <a href="#">About</a><br> <a href="#">Terms & Conditions</a><br> <a href="#">Privacy Policy</a><br> <a href="#">DMCA</a><br> <a href="#">2257</a><br> <a href="#">Become a partner</a> </div> <div id="f2">Support and help<br> <a href="#">Contact</a><br> <a href="#">Answered questions</a><br> </div> <div id="f3">Other<br> <a href="#">Chatroulette</a><br> <a href="#">Livecams</a><br /> </div> </div> <div id="flast">© x.com <?php echo date("Y")?> <br/> All rigths reserved.</div> </body> </html> Code (markup): Css body { margin: 0; padding: 0; } #head{background-color: #0066CC; height: 40px; float: none;} #titletext{color: white; font-size: 30px; font-family: Impact; margin-left: 15px; font-weight: bold; float: left;} #meny{float: right; margin-right: 20px; word-spacing: 8px; font-size: 18px; line-height: 220%;} #search{color: blue; float: right; line-height: 220%; margin-right: 5px;} #content{color:black; font-family: Ebrima; font-size: 14px; height: 300px;} #footer{background-color: #0066CC; min-height: 40px; width: 100%; color: white;} #f1 {font-size: 18px; font-weight: bold; margin-left: 60px;} #f2 {font-size: 18px; font-weight: bold; text-align: center;} #f3 {font-size: 18px; font-weight: bold; text-align: right; margin-right: 60px;} #flast {text-align: center;} a:active{color: white; text-decoration: none; } a:hover{color: white; text-decoration: none;} a:link{color: white; text-decoration: none;} a:visited{color: white; text-decoration: none;} Code (markup):
Whats happening here is that your footer link areas are rendered as block elements(divs), divs by default expand the entire width of whatever you place them inside, so each of the divs in the footer is expanding the whole width of the page, pushing the next one down to the next available space. What you want to do is to add these rules to #f1, #f2, #f3: float: left; width: 25%; Code (markup): and this rule to #footer: overflow: auto; Code (markup): And for the love of good, format your HTML and CSS better.
I'm just wondering why you have DIV for headings, DIV for what should probably be UL, and run-on sentences for your menu items. (since anchors are NOT semantic delimiters)... Much less the endless pointless ID for nothing in the CSS. You may want to investigate something called "semantic markup" and a CSS concept called "selectors". Likewise I'd probably not float all three items -- I'd float the first two and let the third fill the remaining space... and of course all those px metric font declarations are inaccessible crap.