How to center webpage content
I can't seem to solve the issue on why my two divs are not centering on the page. I know it is because of float: left. But for the life of me, I can't figure out how to solve the problem. Can anyone help?
Here is my HTML:
<body>
<div align="center">
<div id="left" class="left">
Left box needs to be on left of of white box
</div>
<div id="content" class="content">
Right box needs to be on the right side of red box
</div>
</div>
&开发者_C百科lt;/body>
Here is my 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 the float: left; is causing the problem but I don't know how to solve it.
Thanks.
wrap them in a div with a set width and margin: 0 auto;... for example change your top level div from align="center" to class="center" (or id instead of class) and then do:
.center {
width: 600px;
margin: 0 auto;
}
the align attribute wont effect the alignment of a block level element but rather the alignment of inline elements inside it. which your div's are not.
加载中,请稍侯......
精彩评论