Как расположить элементы так же, как в макете?

Question

[gimmeemoar]

С помощью каких тегов выровнять элементы так же, как в макете? Margin? Или position и свойства в таких случаях используются? Когда я начала задавать отрицательные margin, поняла, что делаю что-то не так. Сейчас мучаю position, но все едет. А если убираю position: absolute у .top едет в центр боковая менюшка.
Ссылка на мой недокод: cssdeck.com/labs/full/dkdvv886
Картинка макета:

Answer 1

[A K]

С помощью каких тегов выровнять элементы так же, как в макете?

Вам явно на Фрилансим

Answer 2

[Сергей Карвасарный]

<div class="left">Левая колонка</div>
<div class="right">Правая колонка</div>

.left {
float:left;
}

.right {
float:left; 
}

Comments

[Сергей Карвасарный]

ну и width выставить.

Answer 3

[IceJOKER]

Простейший макет О_О
position думаю вовсе не нужен

<div id="header">HEADER</header>
<div id="sidebar">SIDEBAR BLOCK</div>
<div id="content">CONTENT BLOCK</div>

#header{
  /*тут все как обычно, главное не забыть clear если пользуетесь float-ом*/
}
#sidebar{
  width: 30%;
  float: left;
}
#content{
  width: 70%;
  float: left;
}

вот простой такой макет, осталось заполнить и стилизировать (размеры конечно тоже меняйте, я для примера в процентах указал)

у вас там хрен знает что О_О

Comments

[Иван Соломенников]

Еще можно вместо дивов использовать HTML5 теги, header, menu, article, aside, footer и тп.

[IceJOKER]

capable: сначала так и писал, потом изменил на div-ы, побоялся напугать автора вопроса ) мало ли )

[Иван Соломенников]

IceJOKER: На скрине бардак в коде ужасный, по моему автора уже ничем не напугаешь. :)

Answer 4

[Pavel]

вам нужна кросс-браузерная верстка. Она делается с помощью поддерживаемых во всех браузерах свойствах (сохраните). Для позиционирования элементов, обычно все элементы в плавающем стиле делаются (свойство float) и относительным позиционированием (relative).

Несколько месяцев назад тоже была проблема с макетами. Смотрите в сторону кросс-браузерной верстки, а дальше только опыт - пробуйте, смотрите.

Теперь по делу:
0. Весь контент на сайте можно расположить в Div'e с названием container (чисто символически) и выставить конкретное значение ширины, а чтобы было по центру - margin: 0 auto;
Почему конкретное значение? вы можете делать резиновый сайт, но проще сделать адаптивную верстку с несколькими вариантами (на @ media-queries )

В контейнере:
1. Левое меню вы можете сделать Div и выровнять по левой части (float:left), в который вложите опять же Div'ы, которые будут кнопками.
2. Правая часть ни что иное, как второй Div, в котором расположены другие div (с обязательно одинаковым свойством float). Каждый такой вложенный div является автоматически будет друг под другом. если будет проблема, смотрите в сторону box-sizing.

Это в общем-то основные сведения, чтобы отталкиваться. Вот пример, который я делал сайт