HTML and CSS div not hitting the top of the browser viewport -
the problem: (http://i.imgur.com/mu5hboa.png)
as can see in image above maincontent floats below actual top op browser view port, cant make stick top , stay centered @ same time.
also quick side question, how #maincontent, .rightcontentborder , .leftcontentborder height #contentbox id
body { background-image:url(img/campusdjursland_tourneyhjemmeside_grafik/resten/bg_pattern.png); background-repeat:repeat; font-family:"trebuchet ms", arial, helvetica, sans-serif; } p { text-align:left; } li { text-align:left; } #contentbox { margin: 1px auto 1px auto; width:786px; height:auto; min-height:700px; max-height:none; } .leftcontentborder { width:27px; height:700px; float:left; background-image:url(img/campusdjursland_tourneyhjemmeside_grafik/resten/leftside_orangebar1px.png); background-repeat:repeat-y; } .rightcontentborder { width:27px; height:700px; float:right; background-image:url(img/campusdjursland_tourneyhjemmeside_grafik/resten/rightside_orangebar1px.png); background-repeat:repeat-y; } #maincontent { margin: 0 auto 0 auto; width:732px; height:700px; background-color:#ccc; }
the html
<body> <div id="contentbox"> <div class="leftcontentborder"></div> <div class="rightcontentborder"></div> <div id="maincontent"> test </div> </div> </body>
do basic css reset this:
* { margin:0; padding:0; }
this removes default paddings margins on elements.
Comments
Post a Comment