css - How to center webpage content -
i can't seem solve issue on why 2 divs not centering on page. know because of float: left. life of me, can't figure out how solve problem. can help?
here html:
<body> <div align="center"> <div id="left" class="left"> left box needs on left of of white box </div> <div id="content" class="content"> right box needs on right side of red box </div> </div> </body>
here css:
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; } body { font-family: arial, sans-serif; background: #006699; } .content{ width: 300px; float: left; background: #ffffff; height: 300px; } .left{ background: none repeat scroll 0 0 red; float: left; height: 300px; width: 300px; }
i know float: left; causing problem don't know how solve it.
thanks.
wrap them in div set width , margin: 0 auto;
... example change top level div align="center"
class="center"
(or id instead of class) , do:
.center { width: 600px; margin: 0 auto; }
the align attribute wont effect alignment of block level element rather alignment of inline elements inside it. div's not.
Comments
Post a Comment