Помогите с разметкой

A
На сайте с 28.09.2013
Offline
0
357

Добрый вечер!

И так можно пытаюсь сделать разметку с помощью DIV

Идея следующая

" />

В общем sidebar не хочет выравняться по уровню с header.

Вот код:

<body>

<div class="container">

<div class="header">

<!-- end .header -->HEADER</div>

<div class="sidebar1">

<!-- end .sidebar1 --></div>

<div class="content">

<!-- end .content -->CONTENT</div>

<div class="sidebar2">

<!-- end .sidebar2 -->SIDEBAR</div>

<div class="footer">

<!-- end .footer -->FOOTER</div>

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

</body>

Вот Css:

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

margin: 0;

padding: 0;

color: #000;

}

.container {

width: 1240px;

background-color: #FFFFFF;

margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */

}

.header {

background-color: #FF0000;

width: 900px;

height: 45px;

float: left;

}

.sidebar2 {

background-color: #EADCAE;

padding-top: 10px;

padding-right: 0;

padding-bottom: 10px;

padding-left: 0;

height: 600px;

margin-right: 0px;

}

.content {

width: 900px;

float: left;

height: 600px;

padding-top: 10px;

padding-right: 0;

padding-bottom: 10px;

padding-left: 0;

}

.footer {

padding: 10px 0;

background-color: #CCC49F;

position: relative;

clear: both;

}

Пробовал играться с float, clear и т.д чет ничего не помогает

R
На сайте с 18.12.2009
Offline
92
#1

Чтобы sidebar был по уровню с header - сам header сделать в container.

A
На сайте с 28.09.2013
Offline
0
#2

Спасибо за оперативность, но header вроде и так находится в container.

Можно подробней пожалуйста, я совсем новичок в этом деле :)

[Удален]
#3

<body>

<div class="container">
<div class="header">
HEADER
</div>
<div class="sidebar2">
SIDEBAR
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
</body>

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}

.container {
width: 1240px;
background-color: #FFFFFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */;
}

.header {
background-color: #FF0000;
width: 900px;
height: 45px;
float: left;
}

.sidebar2 {
background-color: #C2C2C2;
width: 340px;
height: 665px;
float: right;
}

.content {
width: 900px;
float: left;
background: blue;
height: 600px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

.footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
TF-Studio
На сайте с 17.08.2010
Offline
334
#4

Обычный двухколоночный макет - пример реализации море!

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
M
На сайте с 12.09.2013
Offline
5
#5

Спасибо большое вопрос снят

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий