X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Задачка. Обтекаемый футер снизу.
vladimir_lwlx
vladimir_lwlx
Topic Starter сообщение 3.4.2011, 14:22; Ответить: vladimir_lwlx
Сообщение #1


Всем Добрый день.
Есть следующий вопрос: как можно сделать обтекающий слой прижатым к низу (см. изображение). Высота wrapper будет зависить соответственно от кол-ва контента в блоке left с указанным float.
[IMG]http://s44.radikal.ru/i105/1104/a5/c46b98457722.gif[/IMG]

Для вроде бы простой проблемы - в инете решений не нашел (есть только решения для фиксированной высоты), пробовал делать сам следующим образом (путем добавления блока с clear:left и вымещением вверх футера margin-top:-40px;):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Two-column</title>
<meta name="description" content=""/>
<meta name="keyword" content=""/>
<link type="text/css" href="css/styles.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
</div>
<div class="clear"></div>
<div class="footer">
Content Content Content
Content Content Content
Content Content Content
</div>
</div>
</body>
</html>


[CSS]
/* */
.wrapper {
overflow: hidden;
border: 1px solid red;
background: #f0f0f0;
}
.left {
width: 200px;
float: left;
background: #64a6d2;
}
.clear {
clear: left;
}
.footer {
height: 40px;
margin-top: -40px;
background: #0959a2;
}
/* */
[/CSS]

- Все работает как надо в Opera, FireFox, IE8 - бэкграунд под слоем, контент обтекается. Не работает в вебкитах - контент не обтекается. И не работает в ие6-7.

[IMG]http://s47.radikal.ru/i116/1104/bd/fceedb72e42c.gif[/IMG]

Есть ли у кого-нибудь какие идеи?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 3.4.2011, 20:46; Ответить: Malganus
Сообщение #2


margin-left задать футтеру, это если ширина левого блока будет фиксирована, ну или примерно известна. Пока больше ничего в голову не приходит. Может более знающие люди чего хорошего подскажут.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vladimir_lwlx
vladimir_lwlx
Topic Starter сообщение 4.4.2011, 9:45; Ответить: vladimir_lwlx
Сообщение #3


Нет margin-left нельзя, видимо не совсем поняли задачу: нужно именно обтекание левого блока контентом футера - а так будет просто отступ. Макет будет двухколоночным и блок контента в некоторых случаях будет "выпирать" футер либо ниже левого обтекаемого блока либо частично.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
adlic
adlic
сообщение 4.4.2011, 10:13; Ответить: adlic
Сообщение #4


Ну а если padding-left?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vladimir_lwlx
vladimir_lwlx
Topic Starter сообщение 4.4.2011, 18:30; Ответить: vladimir_lwlx
Сообщение #5


Вы тоже видимо не поняли саму задачу, отступы здесь ни причем - они отодвинут контент, нужно же обтекание.
Может на картинке будет яснее что должно происходить (если футер к примеру больше):
[IMG]http://s008.radikal.ru/i304/1104/4d/ad4af65703ad.gif[/IMG]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Футер съехал вправо
1 Nasty_Sav 6315 24.2.2015, 19:16
автор: -Degradator-
Открытая тема (нет новых ответов) отступ снизу после основного блока в firefox,opera,ie8
0 Doctor_Victor 9180 16.4.2011, 10:05
автор: -Tusha-kurusha-


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:45
Дизайн