Проблема трёхколоночной блочной вёрстки

StormMan · April 13, 2010

Друзья, проблема у меня вот какая.

Сделал резиновый трёхколоночный шаблон на дивах. Резиновым он получается за счёт того, что правая и левая колонка - плавающие блоки, а центральная - обыкновенный, но с отступами с левой и правой сторон, чтобы оставить место для боковых столбцов.

В общем, принцип такой:

<head>
<title>Три колонки</title>
<style><!--
body {
margin: 0;
padding: 0;
}

div {
height: 500px;
margin: 0;
padding: 0;
}

.left_col {
float: left;
width: 200px;
background: red;
}

.right_col {
float: right;
width: 200px;
background: blue;
}

.middle_col {
margin: 0 13em;
background: green;
}


--></style>
</head>
<body>
<div class="left_col">
</div>
<div class="right_col">
</div>
<div class="middle_col">
</div>
</body>

Этот код работает во всех браузерах.

Я его воплотил в дизайне на http://irkutskmobi.ru/ и был крайне удивлён, когда увидел, что в Google Chrome и Safari центральная колонка занимает не всё пространство между боковыми блоками, а только маленькую его часть, и имеет статичную ширину. В других браузерах - в Осле, FF, Опере всё ок. Уже второй день пытаюсь найти, в чём дело, и не получается.... Помогите, пожалуйста!

StormMan · April 13, 2010

Когда проблему долго не получается решить, выход есть один: переписать всё с нуля! Так что, тридцать минут работы по переписыванию кода решили проблему, которую не удавалось решить много-много часов. Теперь всё работает. Но где была ошибка, науке так и не известно. Старый вариант вёрстки унёс тайну с собой.......

psywalker · April 13, 2010

ТС , там у тя дело походу в самом списке трёхколоночном в контенте, он широкий и полюбому косяки такие будут.

Ааа, ща глянул, всё понятно, это таблица. Конечно-же ячейки тебе переноситься не будут на другие строки, поэтому вместо таблицы сделай по человечески, списком.

clavin · April 16, 2010

в теге <style> не надо применять комментарии вида . Они источник глюков.

Sign In

Проблема трёхколоночной блочной вёрстки

Question

StormMan

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

StormMan

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information