VPF::2 колонки div-ами, одна из которых фикс. ширины

Vorona

Дата 12.7.2009, 12:12 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 155
Регистрация: 12.10.2004
Где: Украина, Днепропе тровск

Репутация: нет
Всего: 2

Всем привет smile

Помогите пожалуйста модернизировать нижеследующий хак, для организации 2-х колонок div-ами, одна из которых фикс. ширины.

Код


div.container {
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Код


<div class="container">
    <div class="left">
        Аватарка
    </div>
    <div class="right">
        Комментарий
    </div>
</div>

Соответственно, т.к. аватарка в левой колонке - фиксированной длинны, я не могу задать ширину для правого блока (так и хочется написать 100%-50px smile

).

Буду оочень благодарна за помощь smile

p0zt3r

Дата 12.7.2009, 23:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6

Код


<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
    <style>
div
{
    border: 1px solid #000;
}

div.container {
    overflow: hidden;
    width: 100%;
}
div.left {
    width: 50px;  
    float: left;
}
div.right {
    margin-left: 50px;
    width: auto;   
}
</style>
</head>


<body>

<div class="container">
    <div class="left">
        Аватарка
    </div>
    <div class="right">
        Комментарий
    </div>
</div>

</body>
</html>

Вот так может быть?

--------------------

24*7*365*геморой*зарплата=0

blah

Дата 13.7.2009, 01:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


div.right {
height:1%;
overflow:hidden;
}

Добавлено через 7 минут и 8 секунд
Ну и конечно 3px в IE.
p0zt3r, добавьте контента в правую часть.

Vorona

Дата 15.7.2009, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

p0zt3r, большое спасибо smile

Правда, я верстаю в transitional, может быть стоит как и вы в strict? В чем разница?

blah, не совсем поняла ваше дополнение, его стоит прибавить к коду p0zt3r? Зачем?
Прошу прощения за тугодумие.. smile

Кстати, я добавила много контента в правую часть - в ИЕ7, ФФ, Опере работает корректно. ИЕ6 буду обрабатывать позже.

p0zt3r

Дата 15.7.2009, 20:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6

Vorona, да Strict это просто понты smile

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

--------------------

24*7*365*геморой*зарплата=0

blah

Дата 15.7.2009, 22:04 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Vorona,
Сорри, прощелкал св-во margin-left: 50px; Все в норме, колонки на месте.

Цитата(Vorona @ 15.7.2009, 16:09

)

е совсем поняла ваше дополнение, его стоит прибавить к коду p0zt3r?

Нет, это есть отдельное решение.
Просто используя метод p0zt3r, можно столкнуться с некоторым кол-вом багов в ие, из-за отсутствия haslayout.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »