Двухколоночный макет внутри дива.

Микель · January 8, 2008

Добрый день.

Вот начал недавно осваивать верстку слоями.Вот такой код:

<div style="width:857px;border:1px solid red;text-align:left;">
 <div style="float:left;position:relative;border:1px solid yellow;width:820px;margin-right:0px;">111
111
</div>
 <div style="border:1px solid green; width:30px;margin-left:0px;">222
222
</div>
</div>

В Опере ведет себя абсолютно правильно,обрамляющий слой,внутри него две плотно прилегающих к друг другу колонки.

В ИЕ6 ведет себя почти правильно,но между колонками возникает зазор в 3 пикселя.

Хуже всего в Mozilla Firefox. Правая колонка почему-то отображается поверх левой.

Подскажите,плз,как это сверстать кроссбраузерно.

klierik · January 8, 2008

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.holder {
 width:857px;
 background:#ccc;
}
.left {
 float: left;
 background:#ee0;
 width:820px;
 _margin-right:-820px;
}
.right{margin-left:820px; background:#a0a;}

.clear{clear:both;}
</style>
</head>
<body>
<div class="holder">
 <div class="left">
 111

 111

 </div>
 <div class="right">
 222

 222

 </div>

 <div class="clear"></div>
</div>
</body>
</html>

Микель · January 8, 2008

Спасибо большое

klierik · January 8, 2008

u wellcome

настоятельно рекомендую как начинающему "почитать про 3х пиксельный баг ие6"

а так же прочитайте раздел блочной верстки тут: Верстка с помощью слоев

и не плохо было б если вы ознакомились с ссылками у меня в подписи

Микель · January 9, 2008

Вы не могли бы подсказать аналогичный способ для трех колонок и более.Конечно,первое что приходит в голову,это обрамить left и right еще одним слоем,справа поставить третий и сделать по аналогии с двухколоночным,но если у меня ,скажем, горизонтальное меню из 10 пунктов,то слоев получится уж больно много,хотелось какого-нибудь более красивого решения.

Почитал про трехколоночные макеты,но там только с абсолютным позиционирвоанием

musulman · January 9, 2008

_margin-right:-820px; — к чему бы это ? так и должно быть ?

klierik · January 9, 2008

_margin-right:-820px; — к чему бы это ? так и должно быть ?

для корректного отображения в ИЕ6

я же вам описал что стоит почитать да бы не завдавали простые вопросы ))

2Микель,

меню лучше делать через float:left; на основе ul li

а если нужна резиновость, я б делал б таблицой.

Микель · January 9, 2008

klierik Респект. Как-то в голову не приходило подобное использование списков.

А можно еще плз ссылочку про "_margin ", а то поиск меня выкидывает только на другие темы в форуме

Sign In

Двухколоночный макет внутри дива.

Question

Микель

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Микель

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Микель

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Микель

Link to comment

Share on other sites

Обсуждения

Forums

Important Information