Нужна помощь в получении правильной компоновки CSS

Question

У меня хорошее знание CSS, но очень плохое знание макетов CSS. Теперь мне нужно следующий формат (игнорировать размеры Div)

Но я получаю эту

Вот мой HTML и CSS

CSS:

#container 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:1024px; 
    height:100%; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:700px; 
    height:auto; 
    min-height:150px; 
    background: lightgreen; 
} 
#right{ 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
    /*margin-top: -100px; why this is needed?*/ 
} 
#left{ 
    float:left; 
    min-height: 700px; 
    min-width:300px; 
    background: blue; 
} 
#center 
{ 
    float:left; 
    min-height: 700px; 
    min-width:500px; 
    background: lime; 
} 

HTML:

<div id="container"> 
    <div id="top-left"> 
     This is the top left container which is at correct position 
    </div> 
    <div id="right" > 
    </div> 
    <div id="left" > 
    </div> 
    <div id="center" > 
    </div> 
</div> 

Fiddle

Теперь у меня есть следующие вопросы

1. Почему div на правой стороне (оранжевый) не совпадает с верхней по умолчанию? Как я могу это сделать?

2. Два div (синий и лайм) покрываются вышеуказанными div (зеленый). Хотя я могу исправить это, используя margin-top:50px, но когда я использую это, а верхний левый (зеленый) div увеличивается по высоте, правый div (оранжевый) также сдвигается вниз и заканчивается из красного контейнера. Итак, каков правильный путь?

3. Этот вопрос является общим вопросом, который иногда заставляет меня беспокоиться, нормально ли давать размеры div (которые мы уверены, не будем расти в размере), как фиксированные, как 400px X 300px?

Answer 1

пожалуйста, проверьте этот Solved Fiddle

изменить ваши HTML, как этот

<div id="container"> 
    <div id="top-left"> 
     This is the top left container which is at correct position 
    </div> 
    <div id="right" > 
    </div> 
    <div id="left" > 
    </div> 
    <div id="center" > 
    </div> 
</div> 

CSS

#container 
{ 
    position:absolute; 
    top:25px; 
    left:25px; 
    width:1024px; 
    height:100%; 
    min-height: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left 
{ 
    position:relative; 
    top:25px; 
    left:25px; 
    width:700px; 
    height:auto; 
    min-height:150px; 
    background: lightgreen; 
    float:left 
} 
#right{ 
    margin-top:25px; 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
    /*margin-top: -100px; why this is needed?*/ 
} 
#left{ 
    float:left; 
    min-height: 700px; 
    min-width:300px; 
    background: blue; 
    position:relative; 
    margin-top:35px; 
} 
#center 
{ 
    margin-top:35px; 
    position:relative; 
    float:left; 
    min-height: 700px; 
    min-width:500px; 
    position:realtive; 
    background: lime; 
} 

Answer 2

Ну, объединить ответы на вопросы 1 и 2:

Смешивания позиционирования с макетом поплавка на основе, как правило, плохая идея, эти понятия не смешиваются хорошо. Побочные эффекты включают перекрытие div (иногда это желательно, часто это не так) и странное положение ящиков, как наблюдалось.

Чтобы избежать этих проблем, я хотел бы предложить переход на чистый флоат-использование в этом случае:

Orange ДИВ получает float:right (и ширина)
Top зеленый ДИВ не получает ничего особенного (возможно height)
Синий ДИВ получает float:left (и ширину)
Средний зеленый ДИВ автомагически заполняет все остальное. Добавьте margin-left и -right, если это самый длинный из этих трех столбцов.

Answer 3

Для ваших вопросов,

• 1) У вас нет структуры разбивается на две «колонки», которая вызывает, что правая сторона не совпадают, так как есть элемент на вершине.

• 2) Это связано с использованием position: relative; и top: 25px;/left: 25px;. Когда вы используете эти стили, вам нужно скорректировать верхний/левый элементы ниже. Чтобы противодействовать этим стилям, вы можете добавить маржу, или если они расположены, вы просто добавите 25px плюс любое пространство, которое вы хотели бы между ними.

• 3) Это нормально, чтобы дать им фиксированный размер, но есть некоторые вещи, которые следует учитывать: Отзывчивый веб-дизайн должен избегать использования фиксированных размеров, если у вас будет контент внутри этого div, и что потребности макета должны влиять на ваше решение.

---

Это, как я бы об этом, но вы можете использовать другие методы вместо calc благодаря мобильной поддержке.

(! Без calc вам нужно будет установить фиксированные высоты или использовать % для поля, но будет работать так же)

HTML Состав:

<div class="wrapper"> 
    <div class="leftSide"> 
     <header> 

     </header> 
     <div class="sideBar"> 

     </div> 
     <div class="mainCont"> 

     </div> 
    </div> 
    <div class="rightSide"> 

    </div> 
</div> 

CSS для разметки:

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    width: 80%; 
    height: 100%; 
    margin: 0 auto; 
    position: relative; 
} 

.leftSide { 
    width: 70%; 
    height: 100%; 
} 

header { 
    width: 100%; 
    height: 20%; 
    background: mediumSeaGreen; 
    margin-bottom: 10px; 
} 

.sideBar { 
    width: 30%; 
    height: calc(80% - 10px); 
    background: brown; 
    float: left; 
} 

.mainCont { 
    width: calc(70% - 10px); 
    height: calc(80% - 10px); 
    margin-left: 10px; 
    background: tan; 
    float: left; 
} 

.rightSide { 
    width: calc(30% - 10px); 
    height: 100%; 
    background: #2b2b2b; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Наконец, скрипка: DEMO

Answer 4

Это будет мой выбор к решению этого:

#container { 
    padding: 25px; 
    width:1024px; 
    min-height:900px; 
    margin-left: auto; 
    margin-right: auto; 
    background: red; 
} 
#top-left { 
    float:left; 
    width:790px; 
    height:175px; 
    min-height:150px; 
    background: lightgreen; 
    margin-bottom: 25px; 
} 
#right { 
    float:right; 
    min-height: 900px; 
    min-width: 200px; 
    margin-right: 10px; 
    background: orange; 
} 
#left { 
    float:left; 
    min-height: 700px; 
    min-width:250px; 
    background: blue; 
    margin-right: 25px; 
} 
#center { 
    float:left; 
    min-height: 700px; 
    min-width:515px; 
    background: lime; 
} 

Все зависит от того, как жидкость, вы хотите, чтобы макет быть, но я снял большинство своих свойств положения (которые, как правило, не реагируют на поплавках) и добавил несколько измерений.

http://jsfiddle.net/TNbHZ/1/

Answer 5

Я хотел бы предложить лучшую разметку для этого. Кроме того, вы должны избегать position, если это возможно.

Вот разметка, которую я рекомендую.

<div class="container"> 
    <div class="main-left"> 
     <div class="header"></div> 
     <div class="content-left"></div> 
     <div class="content-right"></div> 
    </div> 
    <div class="main-right"></div> 
</div> 

Brief CSS, здесь:

body{background:#F00} 
.container{margin:0 auto; width:1024px;} 

.main-left{float:left; width:800px} 
.main-right{background:orange; float:right; height:620px; width:200px} 

.header{background:green; height:150px; margin-bottom:20px;} 
.content-left{background:blue; float:left; height:450px; width:300px} 
.content-right{background:lime; float:left; height:450px; width:500px} 

Примечание: Ofcourse очистки поплавка необходимо!

СПЭ на jsfiddle: http://jsfiddle.net/mgcq6/