Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблема с двумя колонками


Автор: anonym 24.1.2008, 20:19
Задача следующая. Есть внешний div и два внутренних, правый и левый. Текст в левом должен начинаться с самого верха, а в правом должен начинаться немного пониже. Для этого я установил для правого свойство margin-top.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="outer">
        <div id="leftCol">
            Info in left column. Info in left column. Info in left column. Info in left column.
            Info in left column. Info in left column. Info in left column. Info in left column.
            Info in left column. Info in left column. Info in left column. Info in left column.
            Info in left column. Info in left column. Info in left column. Info in left column.
        </div>
        <div id="rightCol">
            Info in right column. Info in right column. Info in right column. Info in right
            column. Info in right column. Info in right column. Info in right column. Info in
            right column. Info in right column.
        </div>
    </div>
</body>
</html>


Код

#leftCol
{    
    width: 300px;
    float: left;
}

#rightCol
{
    margin-left: 310px;
    margin-top: 50px;
}

При этом появляется проблема. В FireFox-е оба столбца съезжают вниз (Хотя по идее должен только правый). В Опере съезжает только правый, но текст левого столбца, находящийся выше текста правого столбца отображается, но его нельзя даже выделить. То есть он полностью недоступен. В IE всё отображаетс янормально. Не понимаю, в чём здесь дело?

Автор: NDenis 25.1.2008, 11:23
overflow:hidden; для контейнера не пробовали?

Автор: anonym 25.1.2008, 12:14
NDenis, вау, замечательно! Большое спасибо!  smile 
А какое есть тому научное объяснение? Как я понимаю

Цитата

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. 

hidden 
Отображается только область внутри элемента, остальное будет обрезано.

Но  как это помогает решить данную проблему?

Автор: SelenIT 25.1.2008, 13:16
Это шаманство. Из серии "это не объясняется, это надо запомнить". Вот, имхо, неплохая http://rmcreative.ru/article/web/clear-floats/ по проблеме, вот http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/ чуть подробнее.

Автор: NDenis 25.1.2008, 14:09
anonym, если я ничего не путаю, это называется схлопыванием полей (поищите в гугле collapsing margin), вам дадут ответ как это шаманство объясняется ;)

Автор: anonym 25.1.2008, 14:23
Млин... всё бы хорошо, но с overflow: hidden горизонтальная прокрутка странички стала работать через какую-то задницу... буэээ...

Автор: anonym 25.1.2008, 15:27
SelenIT, спасибо, хорошие ссылки

Автор: bazzjr 25.1.2008, 17:26
Пропиши идентификатору  #outer{display:table-cell}  . Дело в том, что по умолчанию, при *нормальном* режиме, ФФ Опера и ИЕ, отображают пустые(div'ы без стилей-без ничего)div'ы поразному, т.е. у каждого браузера прописаны свои стандарты *пустым* div'ам. 
После этого, ты можешь настраивать вид так, как тебе заблагоразуметься!
И вообще зачем строить такую концепцию, дивам??? 

Автор: anonym 25.1.2008, 17:41
Цитата(bazzjr @  25.1.2008,  17:26 Найти цитируемый пост)
И вообще зачем строить такую концепцию, дивам???  

В смысле?... чтобы избегать использования таблиц  smile  Или ты не об этом?

Добавлено через 4 минуты и 46 секунд
Цитата(bazzjr @  25.1.2008,  17:26 Найти цитируемый пост)
Пропиши идентификатору  #outer{display:table-cell} 

Супер! Помогло!
пока не нашёл очередной глюк...)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)