CSS, float
| edevyatkin |
|
|
Темы:
0
Сообщения:
13
Участник с: 16 июля 2012
|
Уберите height: 200px для .post1 и .post2 и высота будет подогнана под содержимое дивов. |
| salatovij |
|
|
Темы:
20
Сообщения:
87
Участник с: 16 июля 2012
|
Всё получилось, ещё раз спасибо за помощь :) А вот ещё, почему-то блок с авторизацией потерялся. 
|
| edevyatkin |
|
|
Темы:
0
Сообщения:
13
Участник с: 16 июля 2012
|
Для #main в css добавьте vertical-align: top. Или же высоту для меню задать. Должно помочь. |
| salatovij |
|
|
Темы:
20
Сообщения:
87
Участник с: 16 июля 2012
|
edevyatkinНет, не помогло :( Пробовал и так и так, и всё вместе. |
| lampslave |
|
|
Темы:
32
Сообщения:
4796
Участник с: 05 июля 2011
|
Всё ещё актуально? |
| salatovij |
|
|
Темы:
20
Сообщения:
87
Участник с: 16 июля 2012
|
Нет. P.S. Но для собственного развития буду благодарен за правильное решение :) |
| lampslave |
|
|
Темы:
32
Сообщения:
4796
Участник с: 05 июля 2011
|
В общем случае это должно выглядеть как-то так:<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<style>
.b-page {
min-width: 1000px;
position: relative;
}
.b-login {
background: #ccc;
position: absolute;
top: 0;
left: 50%;
margin-left: 300px;
width: 200px;
}
.b-page__header {
width: 500px;
margin: 0 auto;
}
.b-content {
width: 500px;
margin: 0 auto;
}
.b-article {
background: #ccc;
}
</style>
</head>
<body class="b-page">
<div class="b-login">
<p>Привет, гость!</p>
</div>
<h1 class="b-page__header">Заголовок</h1>
<div class="b-content">
<article class="b-article">
<h1>Заголовок записи</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius tellus ac massa porttitor elementum vitae eu sem. Aenean ut sem in mi condimentum vehicula id sit amet velit. Sed condimentum, enim ornare feugiat posuere, erat massa consectetur lacus, sed vulputate sem nisl quis tortor. Nam mauris neque, imperdiet a convallis eu, aliquet sit amet felis. Etiam elementum ullamcorper nibh, sit amet aliquet elit hendrerit sit amet. Nulla facilisi. Maecenas venenatis sapien sit amet augue dictum aliquam. Etiam sollicitudin, massa eget sodales posuere, nulla velit semper dolor, pulvinar fringilla lacus purus a urna. Suspendisse potenti. Phasellus sit amet arcu non augue fringilla tristique. Quisque eget lectus id quam varius euismod id sed nisl. Praesent at turpis ante, et facilisis lorem. Cras pulvinar elementum accumsan.</p>
</article>
<article class="b-article">
<h1>Заголовок записи</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius tellus ac massa porttitor elementum vitae eu sem. Aenean ut sem in mi condimentum vehicula id sit amet velit. Sed condimentum, enim ornare feugiat posuere, erat massa consectetur lacus, sed vulputate sem nisl quis tortor. Nam mauris neque, imperdiet a convallis eu, aliquet sit amet felis. Etiam elementum ullamcorper nibh, sit amet aliquet elit hendrerit sit amet. Nulla facilisi. Maecenas venenatis sapien sit amet augue dictum aliquam. Etiam sollicitudin, massa eget sodales posuere, nulla velit semper dolor, pulvinar fringilla lacus purus a urna. Suspendisse potenti. Phasellus sit amet arcu non augue fringilla tristique. Quisque eget lectus id quam varius euismod id sed nisl. Praesent at turpis ante, et facilisis lorem. Cras pulvinar elementum accumsan.</p>
</article>
</div>
</body>
</html><!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<style>
.b-page {
width: 750px;
padding-left: 250px;
margin: 0 auto;
}
.b-login {
background: #ccc;
float: right;
width: 200px;
}
.b-page__header {
width: 500px;
float: left;
}
.b-content {
width: 500px;
float: left;
cleat: left;
}
.b-article {
background: #ccc;
}
</style>
</head>
<body class="b-page">
<div class="b-login">
<p>Привет, гость!</p>
</div>
<h1 class="b-page__header">Заголовок</h1>
<div class="b-content">
<article class="b-article">
<h1>Заголовок записи</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius tellus ac massa porttitor elementum vitae eu sem. Aenean ut sem in mi condimentum vehicula id sit amet velit. Sed condimentum, enim ornare feugiat posuere, erat massa consectetur lacus, sed vulputate sem nisl quis tortor. Nam mauris neque, imperdiet a convallis eu, aliquet sit amet felis. Etiam elementum ullamcorper nibh, sit amet aliquet elit hendrerit sit amet. Nulla facilisi. Maecenas venenatis sapien sit amet augue dictum aliquam. Etiam sollicitudin, massa eget sodales posuere, nulla velit semper dolor, pulvinar fringilla lacus purus a urna. Suspendisse potenti. Phasellus sit amet arcu non augue fringilla tristique. Quisque eget lectus id quam varius euismod id sed nisl. Praesent at turpis ante, et facilisis lorem. Cras pulvinar elementum accumsan.</p>
</article>
<article class="b-article">
<h1>Заголовок записи</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius tellus ac massa porttitor elementum vitae eu sem. Aenean ut sem in mi condimentum vehicula id sit amet velit. Sed condimentum, enim ornare feugiat posuere, erat massa consectetur lacus, sed vulputate sem nisl quis tortor. Nam mauris neque, imperdiet a convallis eu, aliquet sit amet felis. Etiam elementum ullamcorper nibh, sit amet aliquet elit hendrerit sit amet. Nulla facilisi. Maecenas venenatis sapien sit amet augue dictum aliquam. Etiam sollicitudin, massa eget sodales posuere, nulla velit semper dolor, pulvinar fringilla lacus purus a urna. Suspendisse potenti. Phasellus sit amet arcu non augue fringilla tristique. Quisque eget lectus id quam varius euismod id sed nisl. Praesent at turpis ante, et facilisis lorem. Cras pulvinar elementum accumsan.</p>
</article>
</div>
</body>
</html> |