Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > 2 колонки div-ами, одна из которых фикс. ширины

Автор: Vorona 12.7.2009, 12:12

Всем привет 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

Код


<?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>

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

Автор: blah 13.7.2009, 01:18

Код


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

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

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

Автор: blah 15.7.2009, 22:04

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

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

)

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

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