Having trouble centering my layout

Question

I have searched on this site for about 35 minutes, and I am sure it is a really simple answer and I am probably over-looking it, but I am having trouble figuring out how to center my layout.

It is a simple layout, it has a container div, left div for the menu, and right div for the content. (Here is the CSS for this so far..)

#container {
  text-align:center; 
  width: 960px; 
  background-color:#FFFFFF; 
  margin-right:10px; 
  margin-left:10px; 
  display:block;
}
#left {
  text-align:; 
  width:300px; 
  display:block; 
  background-color:#FFFFFF; 
  padding-left:5px; 
  padding-right:5px;
}
#right {
  text-align:left; 
  padding-left:10px; 
  padding-right:10px; 
  width:620px; 
  display:block;
}

When I save it and open in my browser, the layout is just sitting to the left. What can I add to make it go to the center?

I have tried a few things from other peoples' threads and nothing is working. What am I doing wrong?

I would fix your `text-align` in `#left` for starters. Its wrong. — Connor Tumbleson, Aug 05 '13 at 21:45

score 0 · Answer 1 · answered Aug 05 '13 at 21:45

0

There is a nice trick using margin: 0 auto.
Check out this site or this site for a good explanations of the subject.

answered Aug 05 '13 at 21:45

EZLearner

1,614
16
25

Thanks to both of you for clear, correct answers. I appreciate it. – user2476288 Aug 05 '13 at 22:11

score 0 · Answer 2 · answered Aug 05 '13 at 21:45

Put those 3 divs inside a div with id 'content', then declare a CSS rule something like this:

#content {
   width: <width in px>;
   margin-left: auto;
   margin-right: auto;
}

Everything inside the 'content' div - i.e. your layout - will then appear in the center of the page.

The auto value of the margins is what centers the div.

score 0 · Answer 3 · answered Aug 05 '13 at 22:06

#container {
    width: 960px; 
    background-color:#FFFFFF; 
    margin:0 auto;
}
#container:after{
    content:'';
    display:block;
    clear:both;
}
#left {
    width:300px; 
    float:left;
    padding:0 5px;
}
#right {
    padding:0 10px;
    width:620px; 
    float:right;
}

score 0 · Answer 4 · answered Aug 05 '13 at 22:15

0

Try giving those columns a float.

EG

#left {
  float:left;
}
#right {
  float:right;
}

or if you would like the to sit flush up against each other float them both left!

http://codepen.io/alexbaulch/pen/hzwnE

answered Aug 05 '13 at 22:15

Alex Baulch

751
1
11
24

floats are not a panacea – Erik Funkenbusch Aug 05 '13 at 22:17
Agreed but I would say they could still be appropriate here? – Alex Baulch Aug 05 '13 at 22:20
Only if there is a real reason. "try floating" is not a real reason. floating should be used intentionally, not to fix a problem you are otherwise having. – Erik Funkenbusch Aug 05 '13 at 22:38
Surely a left and right column situation, as described above, would be a prime example of when to use floating? I used the phrase 'try' as I am aware there are many other options. Do you think my solution is incorrect? – Alex Baulch Aug 05 '13 at 22:43
He wasn't asking about the left and right columns.. he was asking about centering the container. – Erik Funkenbusch Aug 05 '13 at 23:32

score 0 · Answer 5 · answered Aug 06 '13 at 01:13

At the heart of this is margin: 0 auto; on the parent div.

You will save yourself a lot of time and pain if you look up box-sizing: border-box; and you start using percentages and ems instead of px. Trust me. I wouldn't hire someone who had pixels on anything but the occasional border. Plus - it's WAY easier. I would also suggest only using id's (#) for javascript and super special situations. Sticking with .class is the consensus right now. Good Luck!

http://jsfiddle.net/sheriffderek/CN8Ev/

HTML

<div class="container">

    <div class="main">main</div>

    <div class="sub">sub</div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame - google micro clear fix instead */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    float: left;
}

Having trouble centering my layout

5 Answers5