Как центрировать два деления, учитывая разные разрешения пользователей

Question

Я новичок в css, и у меня возникли проблемы с центрированием двух делений. У меня разрешение экрана 1920 x 1080, и использование поля не будет центрировать два делителя, если у посетителя моего сайта будет более низкое разрешение. Я знаю, что это будет перемещено, верно?

подробности:

Пожалуйста, посмотрите на мою проблему здесь ---> http://i1204.photobucket.com/albums/bb409/bendaggers/help.png

• Div id = Topwrapper
• Div id = MainWrapper: содержит контейнер и боковую панель (серая)
• Div id = контейнер (желто-зеленый)
• Div id = боковая панель (синяя)

У меня нет проблем с Topwrapper, как вы можете видеть, он находится в центре, но моя очень большая проблема - это контейнер и боковая панель. Я не могу выровнять его с Topwrapper. Вы можете помочь мне написать код? Другое дело, не могли бы вы рассмотреть разрешение экрана, насколько я знаю, мой код Mainwrapper будет регулировать его ширину из-за min-width = 1000px;

Если вы считаете, что у вас есть идея с моими кодами, пожалуйста, не стесняйтесь ее пересматривать.

    <div id="TopWrapper"></div>
    <div id="MainWrapper">

        <div id="Content"></div>
        <div id="Sidebar"></div>

    </div>

#MainWrapper {
    height:3000px;
    min-width:1000px;
    background-color:#CCC;

}

#TopWrapper {
    background-image:url(images/topwrapper.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    min-width:630px;
    background-color: #0F0;
    float:left;
    margin-left:150px;
    display:inline;


}

#Sidebar {
    height:3000px;
    min-width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}

Большое спасибо заранее!

Answer 1

Вы можете стилизовать существующий элемент div "#MainWrapper" с шириной, которая дополняет два элемента div с уже имеющимся содержимым, обеспечивая свободное пространство между ними и оставляя место для полей с обеих сторон (возможно, на 30 пикселей шире, чем сумма двух делений), а затем дать "margin-left: auto;" и "margin-right: auto;" в div #MainWrapper, поэтому он центрируется. Затем вам нужно будет стилизовать тег «body», чтобы придать ему нужный цвет.

Answer 2

Это еще одно решение, оберните ваш контент в другой div с шириной 1000px, затем установите поле: 0 auto;что означает центрирование его на странице, и оно будет плавным при любом разрешении экрана

Вот CSS с новой оболочкой для содержимого ID стиля и HTML

#MainWrapper {
    height:3000px;
    min-width:1000px;
    background-color:#CCC;
}
#TopWrapper {
    background-image:url(images/topwrapper.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    min-width:100%;
    height:77px;
    margin: 0;
}
#Content {
    height:3000px;
    width:630px;
    background-color: #0F0;
    float:left;
    display:inline;
}
#Sidebar {
    height:3000px;
    width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}
#content-wrapper {
    margin:0 auto;
    width:1000px;
}

<div id="TopWrapper"></div>
<div id="MainWrapper">
  <div id="content-wrapper">
    <div id="Content"></div>
    <div id="Sidebar"></div>
  </div>
</div>

Answer 3

Попробуйте это:

#MainWrapper {
    height:3000px;
    width:1000px;
    background-color:#CCC;
    margin:0 auto;

}

#TopWrapper {
    background-color:#000000;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    width:630px;
    background-color: #0F0;
    float:left;


}

#Sidebar {
    height:3000px;
    width:350px;
    background-color: #00F;
    margin-left:20px;
    float:right;
}

Если это не то, что вы ищете, дайте мне знать. Я буду рад работать с вами.

О, и если вы хотите, чтобы фон был определенного цвета, просто добавьте:

    body {
    background-color:#CCC; /* or whatever colour you like */
}