CODEWITHSUNDEEP
csshtmlcenter
Ryan Bennett
Ryan Bennett

Reputation: 23

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>    
</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.

Upvotes: 2

Views: 2323

Answers (1)

prodigitalson
prodigitalson

Reputation: 60413

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.

Upvotes: 5

Related Questions