Выравнивание футера - HTML и CSS

ZvEr_HaCkEr · 27.06.2011, 16:50

Здравствуйте, возникла следующая проблема:при использование такого стиля

Код:

body{
    position:relative;
    margin : auto;
    width : 1100px;
    padding : 0 25px;
}
section {
    width: 680px;
    padding: 15px 15px 15px 0;
    margin: 35px auto 0;
    float: left;
}
article{
   background-color:#ff0000;
   padding:15px 12px;
   position:relative;
   margin:10px 10px 25px;
}
aside{
   position:absolute;
   right:0;
   margin: 60px 35px 0 0;
   width:330px;
   height:1700px;
   overflow:hidden;
   background-color:#ff0000;
}
footer{
   display:block;
   background-color:#00ff00;
   padding:15px 12px;
   height:20px;
   position:relative;
   clear:both;
   margin:10px 10px 25px;
}

получаю такой результат

А нужно

Подскажите как исправить. Заранее спасибо!

P.S html структура
<body>
<section>
<article>
................
</article>
</section>
<aside>
................
</aside>
<footer>
................
</footer>
</body>

nec117 · 27.06.2011, 18:21

position: absolute; bottom:100%; попробуйте

ZvEr_HaCkEr · 27.06.2011, 18:40

не помогло

Naive · 27.06.2011, 20:08

Код:

position:absolute; bottom:0px

попробуйте, только при появлении полосы прокрутки проблема не решится.
Как вариант, засунуть все содержимое страницы в еще один див, внутри которого к низу прилепить футер. Я обычно использую автошаблон http://csstemplater.com/

marccella · 28.06.2011, 19:42

CSS:

Код:

 body{
    margin : auto;
    width : 1100px;
    padding : 0 25px;
}
section {
    width: 680px;
    padding: 15px 15px 15px 0;
    margin: 35px auto 0;
    float: left;
}
article{
   background-color:#ff0000;
   padding:15px 12px;
   margin:10px 10px 25px;
}
aside{
   float: right;
   margin: 60px 35px 0 0;
   width:330px;
   height:1700px;
   background-color:#ff0000;
}
footer{
   display:block;
   background-color:#00ff00;
   height:50px;
   clear: both;
   margin: 0 35px;
}

#wrap {
  height: auto;
  margin : 0 auto -50px;
}

HTML:

Код:

<div id="wrap">
    <section>
        <article>
            ................
        </article>
    </section>

    <aside>
        ................
    </aside>
</div>
<footer>
    ................
</footer>

dekameron · 29.06.2011, 01:21

Перед открытием <footer> попробуйте вставить

Код HTML:

<div style="clear: both;"></div>

marccella · 29.06.2011, 01:32

Цитата:

Сообщение от dekameron

Перед открытием <footer> попробуйте вставить

Код HTML:

<div style="clear: both;"></div>

Ну во-первых у него изначально уже в 'footer'e указано 'clear:both', а не срабатывает потому что у элемента 'aside' абсолютное позиционирование.

Кстате, можно сделать еще так:

CSS:

Код:

 body{
    margin : auto;
    width : 1100px;
    padding : 0 25px;
}
section {
    width: 680px;
    padding: 15px 15px 15px 0;
    margin: 35px auto 0;
    float: left;
}
article{
   background-color:#ff0000;
   padding:15px 12px;
   margin:10px 10px 25px;
}
aside{
   float: right;
   margin: 60px 35px 0 0;
   width:330px;
   height:1700px;
   background-color:#ff0000;
}
footer{
   display:block;
   background-color:#00ff00;
   height:50px;
   clear: both;
   margin: 0 35px;
}

HTML:

Код:

<body>
    <section>
        <article>
            ................
        </article>
    </section>

    <aside>
        ................
    </aside>

<footer>
    ................
</footer>
</body>

Отличается от моего предыдущего кода тем, что отпадает надобность дополнительного 'wrap'а вокруг контента, но при этом коде, если контент будет меньше чем само окно, то футер не будет прикреплен ко дну окна.

TranceSmile · 29.06.2011, 12:21

Вот держы. Если нужна резиновая верстка отпишись переделаю

ZvEr_HaCkEr · 29.06.2011, 15:25

Всем спасибо!
marccella, посмотрите пожалуйста все ли нормально.

marccella · 30.06.2011, 02:49

У меня в IE9 меню сносит 'Contacts Us' вниз на новую полосу. Я сейчас только после 16-часового рабочего дня, утром разберемся.

27.06.2011, 16:50	#1
ZvEr_HaCkEr VisualC++/DirectX Форумчанин Регистрация: 16.07.2010 Сообщений: 831	Выравнивание футера Здравствуйте, возникла следующая проблема:при использование такого стиля Код: body{ position:relative; margin : auto; width : 1100px; padding : 0 25px; } section { width: 680px; padding: 15px 15px 15px 0; margin: 35px auto 0; float: left; } article{ background-color:#ff0000; padding:15px 12px; position:relative; margin:10px 10px 25px; } aside{ position:absolute; right:0; margin: 60px 35px 0 0; width:330px; height:1700px; overflow:hidden; background-color:#ff0000; } footer{ display:block; background-color:#00ff00; padding:15px 12px; height:20px; position:relative; clear:both; margin:10px 10px 25px; } получаю такой результат А нужно Подскажите как исправить. Заранее спасибо! P.S html структура <body> <section> <article> ................ </article> </section> <aside> ................ </aside> <footer> ................ </footer> </body> Последний раз редактировалось ZvEr_HaCkEr; 27.06.2011 в 17:25.

27.06.2011, 18:21	#2
nec117 Форумчанин Регистрация: 01.10.2008 Сообщений: 266	position: absolute; bottom:100%; попробуйте Последний раз редактировалось nec117; 27.06.2011 в 18:25.

27.06.2011, 20:08	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `position:absolute; bottom:0px` попробуйте, только при появлении полосы прокрутки проблема не решится. Как вариант, засунуть все содержимое страницы в еще один див, внутри которого к низу прилепить футер. Я обычно использую автошаблон http://csstemplater.com/ Alar, верни репу!

29.06.2011, 01:21	#6
dekameron Форумчанин Регистрация: 27.04.2010 Сообщений: 185	Перед открытием <footer> попробуйте вставить Код HTML: <div style="clear: both;"></div> Помог - тырк на весы

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
выравнивание текста	Olya1985	HTML и CSS	2	19.02.2011 21:28
выравнивание	street-walker	Общие вопросы Delphi	0	16.03.2010 22:10
Построчное выравнивание <ul><li>	Abramovich	HTML и CSS	11	14.04.2009 12:39
выравнивание	wolf950	HTML и CSS	2	17.03.2009 10:05

27.06.2011, 18:40	#3
ZvEr_HaCkEr VisualC++/DirectX Форумчанин Регистрация: 16.07.2010 Сообщений: 831	не помогло

30.06.2011, 02:49	#10
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	У меня в IE9 меню сносит 'Contacts Us' вниз на новую полосу. Я сейчас только после 16-часового рабочего дня, утром разберемся.