Search code examples
htmlalignment

Center Align Content

I have the following two column layout setup on my webpage:

<div id="column1-wrap">
    <div id="column1">Column one content</div>
</div>
<div id="column2">
    Column two content
</div>
    <div id="clear"></div>

Which is powered by the following CSS:

#column1-wrap {
    float: left;
    width: 1000px;}
#column1 {
    margin-right: 600px;}
#column2 {
    float: left;
    width: 600px;
    margin-left: -600px;}

How can I center this on my webpage?

Solution

  • You probaly are going for this: html

    <div class="container">
   <div id="column1-wrap">
     <div id="column1">Column one content</div>
   </div>
   <div id="column2">
      Column two content
   </div>
</div><!--container-->

    CSS

    .container{
    border:1px solid blue;
    margin:0px auto;
    }