html - What is wrong with my CSS code? -
i'm new html / css. want build web site stumbled across problem.
my divs inside "content div" have blank space @ top line div, , can't seem figure out causing problem. can please help? apreciate it.
thank you!
<head> <meta charset="utf-8"> <title>vlad olar</title> <style type="text/css"> body { padding:0; margin:0; font-family:lato, segoe, "segoe ui", "dejavu sans", "trebuchet ms", verdana, sans-serif; background-color:#d8dce1; } .clear { clear:both; } .fixedwidth { width:960px; margin:0 auto; padding:0 0; } #topbar { background-color:#4c7585; height: 40px; width: 100%; } #front { height: 360px; width: 100%; background-color:#d8dce1; } #line { height:10px; width:100%; background-color:#4c4c4c; } #foto { height:120px; width:120px; background-color:#4c4c4c; border-radius:60px; z-index:3; float:left; position:relative; top:-55px; margin-left:103px; } #gaming { height:120px; width:120px; background-color:#4c4c4c; border-radius:60px; z-index:3; float:right; position:relative; top:-55px; margin-right:103px; } #design { height:120px; width:120px; background-color:#4c4c4c; border-radius:60px; z-index:3; float:left; position:relative; top:-55px; margin-left:198px; } #content { margin:0; padding:0; } #fotocontent { background-color:#a48251; height:500px; width:320px; float:left; } #designcontent { background-color:#d1a366; height:500px; width:320px; float:left; } #gamingcontent { background-color:#a48251; height:500px; width:320px; float:left; } #footer { background-color:#4c7585; height: 40px; width: 100%; } #container { margin:0; padding:0; } </style> </head><body> <div id="container"> <div id="topbar"> <div class="fixedwidth"> </div> </div> <div id="front"> </div> <div id="line"> <div class="fixedwidth"> <div id="foto"> </div> <div id="design"> </div> <div id="gaming"> </div> </div> </div> <div class="clear"> </div> <div id="content"> <div class="fixedwidth"> <div id="fotocontent"> </div> <div id="designcontent"> </div> <div id="gamingcontent"> </div> </div> </div> <div class="clear"> </div> <div id="footer"> <div class="fixedwidth"> </div> </div> </div> </body>
as @hiddenhobbes wrote have problem because of #foto, #design , #gaming pulling down .clear div (remove top: -55px; , see it).
if not want recalculate margins can wrap block in wrapper position: absolute; prevent pulling down behaviour on next div.
in html
<div id="line"> <div class="fixedwidth"> <div class="foowrapper"> <div id="foto"></div> <div id="design"></div> <div id="gaming"></div> </div> </div> </div> and in css
.foowrapper { position: absolute; width: 100%; } .fixedwidth { position: relative; }
Comments
Post a Comment