Имея проблемы с центрированием моего макета

Question

Я искал на этом сайте около 35 минут, и я уверен, что это очень простой ответ, и я, вероятно, переглядываю его, но мне трудно понять, как сосредоточиться на моем макете ,

Это простой макет, у него есть контейнер div, левый div для меню и правый div для содержимого. (Вот CSS для этого до сих пор ..)

#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; 
} 

Когда я сохранить его и открыть в браузере, макет просто сидит слева. Что я могу добавить, чтобы попасть в центр?

Я пробовал несколько вещей из нитей других народов и ничего не работает. Что я делаю не так?

Answer 1

Есть хороший трюк, используя margin: 0 auto.
Отъезд this site или this site за хорошее объяснение предмета.

Answer 2

Поместите эти 3 дивы внутри DIV с идентификатором «контента», то объявить правила CSS что-то вроде этого:

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

Все, что внутри «содержание» Div - то есть макет - появится в центр страницы.

Значение полей - это то, что центрирует div.

Answer 3

#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; 
} 

Answer 4

Попробуйте дать этим колоннам поплавок.

EG

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

или если вы хотели бы, чтобы сидеть краснеть друг против друга плывут они оба оставили!

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

Answer 5

В центре это поле: 0 авто; на родительском div.

Вы сэкономите много времени и сил, если будете искать размер коробки: border-box; и вы начинаете использовать проценты и ems вместо px. Доверьтесь мне. Я бы не нанял кого-то, у кого были пиксели на чем-то, кроме случайной границы. Плюс - это проще. Я бы также предложил использовать только id (#) для javascript и супер особых ситуаций. Прямо сейчас. Удачи!

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; 
}