верстка divами в две колонки - проблема в IE

natasha · December 15, 2008

Всем здравствуйте.

У меня такая проблема: страница имеет двухколонный макет. Верстаю слоями. Примерно так:


<div id="container">
<div id="left" style="float:left; width:30%">
TEXT
</div>
<div id="right">
<table>
<tr>
<td>TEXT</td>
<td>TEXT</td>
...
<td>TEXT</td>
</tr>
</table>
</div>
</div>

Все хорошо, но количество столбцов в таблице во второй колонке неизвестно. Она строится динамически, и если их много и таблица не помещается,

то в FF все хорошо - появляется горизонтальная прокрутка, а в IE весь правый блок сползает вниз под левый.

Можно конечно сделать через абсолютное позиционирование(как написано в статье http://www.htmlbook.ru/content/?id=102), но это немного не подходит, потому что сверху у шапки может быть разная высота.

(там меню строится) И тогда будет наложение слоев.

НУ или еще способ сделать таблицей)(что не очень хочется)

Может кто подскажет еще какой выход.) Буду очень признательна.

Ogalig · December 15, 2008

Попробуй в стили второго дива добавить width:69% и overflow:auto .

rus · December 15, 2008

А где ваш код css?

natasha · December 16, 2008

А где ваш код css?

А css больше нет никакого. Слои же рядом располагаются за счет style="float:left; width:30%" у левого слоя.

Попробуй в стили второго дива добавить width:69% и overflow:auto .

Спасибо большое за совет.) Только ведь overflow:auto добавляет полосы прокрутки внутрь слоя, а это как-то не очень хорошо выглядит) спасибо

Мне бы хотелось, чтобы правый слой, который id="right", в ie ввел себя также как в ff. не переносился под левый.

rus · December 16, 2008

1) Раз вы говорите что стили и вовсе не нужны, тогда для чего там стоит id="right" и id="container"?

2) Опишите что вам нужно получить на выходе, я ничего не понял...

natasha · December 18, 2008

Постараюсь получше написать))

Мне нужно сделать страницу, на которой две колонки: левая-меню, правая-контент.

В правой находится таблица, число столбцов которой заранее неизвестно.

И при большом количестве столбцов таблицы,когда она не помешается на экране, в ie она сползает вниз под левое меню.

А мне хотелось бы, чтобы у браузера появлялась горизонтальная полоса прокрутки. (как в ff)

Вот этот код можно посмотреть прям в браузерах и увидеть разницу. Здесь ширина для таблицы выставлена просто для наглядности.


<html>
<body>
<head>
<style>
#container{
}
#left{
float:left;
width:300px;
background-color:red;
}
#right{
margin-left:300px;
}
</style>
</head>

<body>
<div id='container'>
<div id='left'>
TEXT TEXT TEXT<br>
TEXT TEXT TEXT<br>
TEXT TEXT TEXT<br>
TEXT TEXT TEXT<br>
</div>
<div id='right'>
<table width="1000" height="100" border='1'>
<tr>
<td width='50%'>
TEXT
</td>
<td width='50%'>
TEXT
</td>
</tr>
</table>
</dv>
</div>
</body>
</html>

Надеюсь, что теперь попонятней)

rus · December 19, 2008

Так?

<html>
<head>
<style>
#left{
float:left;
width:300px;
background-color:red;
}
#right{
position:absolute;
left:300px;
top:0;
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id='container'>
<div id='left'>TEXT TEXT TEXT<br>
  TEXT TEXT TEXT<br>
  TEXT TEXT TEXT<br>
  TEXT TEXT TEXT<br>
</div>
<div id='right'>
  <table width="100%" height="100%" border='1'>
    <tr>
      <td width='50%'>TEXT</td>
      <td width='50%'>TEXT</td>
    </tr>
  </table>
  </div>
</div>
</body>
</html>

natasha · December 19, 2008

Так?

НУ да. Так можно. Просто я там уже выше упоминала. Мне такой вариант не совсем подходит, потому что сверху у меня еще header и он в высоту может меняться и тогда при абсолютном позиционировании они буду наезжать друг на друга.

Ogalig · December 22, 2008

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

Sign In

верстка divами в две колонки - проблема в IE

Question

natasha

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Ogalig

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

natasha

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

natasha

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

natasha

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information