Ломаем мозг :)

Игорь Ермаков · May 23, 2009

Вобщем сижу маленечко верстаю, и при вёрстке у меня возникла такая задача: расположить рядом 2 блока, один фиксированной ширины, а второй резиновой.

Я сумел решить эту проблему только используя таблицы.

Интересно найдёт ли кто-нибудь решение с блоками.

Обязательные условия:

Никаких иллюзий и тп, есть масса способов привести результат к такому виду, но задача именно в том, чтобы всё было по честному, никаких z-index'ов и тп. (Кстати на примере, который свёрстан блоками результат достигнут именно через z-index, но этот результат только для примера он не правильный.)

На моём хостиге снова глючит FTP так что залить пример не могу, выкладываю код сюда. Делимся мыслями.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<style>
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

/*блоки*/

.left {background:#666;
float:left;
position:absolute;
min-height:100px;
width:379px;
z-index:2;}

.right {background:green;
position:relative;
min-height:100px;
width:100%;
z-index:1;
}

/*Таблицы*/

.table{
width:100%;}

.t1 {background:#666;
width:379px;}

.t2 {background:green;}
</style>
<title>блоки</title>
</head>

<body>

<div id="contaner">
<div class="left"></div>
<div class="right"></div>
<h1>Таблицы</h1>
<table border="1" class="table">
<tr>
<td class="t1">1</td>
<td class="t2">2</td>
</tr>
</table>


</div>
</body>
</html>

psywalker · May 23, 2009

Ты шутишь?

Игорь Ермаков · May 23, 2009

Ты шутишь?

psywalker · May 23, 2009

дружище, тебе сюда: http://htmlbook.ru/content/?id=102

Игорь Ермаков · May 23, 2009

ты не понял условия задачи

psywalker · May 23, 2009

ну как объясни

Игорь Ермаков · May 23, 2009

Вгони тот код, который я вылжил в оперу и уменьши максимально.

Nekromancer · May 23, 2009

Вгони тот код, который я вылжил в оперу и уменьши максимально.

и чаво?

Игорь Ермаков · May 23, 2009

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

psywalker · May 23, 2009

Вгони тот код, который я вылжил в оперу и уменьши максимально.

И в чём прикол?

Игорь Ермаков · May 23, 2009

Ну так попробуй найти бестабличное решение.

psywalker · May 23, 2009

Ну так попробуй найти бестабличное решение.

я не вкурил, что именно надо сделать, что именно добиться, просто по мне эта какая та хрень

Игорь Ермаков · May 23, 2009

Ну блин, я дал пример. Нужно 2 блока расположить рядом, да так, чтобы один был фиксированной ширины, к примеру 300px, а второй занимал около него всё остальное пространство, причём они не должны пересекаться, они должны быть рядом друг с другом.

Кажется просто, но условие таково, что второй блок должен быть резиновым, т.е при максимальном уменьшении растягивался.

Можно обоим блокам задать ширину в процентах, но тогда растягиваться будут оба, можно задать одному ширину в пикселях, а второму задать ширину в процентах, но придётся задавать где-то 70%, а при уменьшении он не заполнит всего экрана, а если задашь в 100%, то экран растянется, что тоже нафиг не нужно.

Вот такие пироги с котятами.

s0rr0w · May 23, 2009

.left

выкидываем

position:absolute;

z-index:2;

.right

выкидываем

position:relative;

width:100%;

z-index:1;

ставим

margin-left:379px;

psywalker · May 23, 2009

Я тоже внесу свою лепту

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div height: 100%;</title>
<style type="text/css">
*{ margin: 0; padding: 0;}

   div#left { float: left; width: 200px; background: #f00;}
   div#right { overflow: hidden; background: #0F0; zoom: 1;}

</style>
</head>

<body>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
</body>
</html>

Игорь Ермаков · May 24, 2009

s0rr0w, ну и я так могу, но экран раздвинется по ширине, а нужно без этого, так что решение не верно.

psywalker, ядрёна кочержка, твоё решение оказалось верным, но что ещё за свойство zoom? В мануале htmlbook оно не описано

Я о таком даже не слышал. Надо будет разобраться.

psywalker, торжество отменяется, твоё решение тоже неверно, в IE уменьши. Блок просто обрезается.

Nekromancer · May 24, 2009

вы гоните..

#left { float: left; width: 200px; background: #f00; position: relative; height: 15px;}
#right {margin: 0 0 0 200px; background: grey; height: 15px;}

Edited May 24, 2009 by Nekromancer

Игорь Ермаков · May 24, 2009

Nekromancer, не мы одни

ЗЫ решение опять же не кроссбраузерно как и предъидущие.

Nekromancer · May 24, 2009

где не работает?

Добавлено:

#left { float: left; width: 200px; background: #f00; position: relative; height: 15px; _margin-right: -3px; font-size: 0;}
#right {margin: 0 0 0 200px; background: #000000; height: 15px; _margin-left: -3px; font-size: 0;}

П.С. Ие6 не понимал просто цвет. + пофиксил 3хпиксельный баг.

Edited May 24, 2009 by Nekromancer

Игорь Ермаков · May 24, 2009

Всё равно не работает. IE7

Nekromancer · May 24, 2009

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

psywalker · May 24, 2009

Nekromancer

Может ты мне объяснишь, чего вы хотите добиться? и причём тут position: relative; ??

Nekromancer · May 24, 2009

я ничего не хочу добиться (в этой ситуации)

влоат для левого блока заставляет бравый быть по всей свободной длине без указания размеров.. релатив вытаскивает левый блок из потока, чтоб правый мог нормально гулять в потоке. Соответственно левый margin для правого блока для того чтоб он не был под левым.

Вообще вытаскивают из потока, чтоб при уменьшение экрана правый блок не спадал в низ, а как бы пропадал(хз для чего это надо, но ваще задача такая была)

Колос · May 25, 2009

Я бы делал примерно так

<div style="width:100%">
  <div style="float:left;width:300px">
	Левая жёсткая колонка
  </div>
  Правая тянущаяся колонка  
</div>

Игорь Ермаков · May 25, 2009

Проблема в том, когда в IE уменьшаешь, то блок обрезается.

s0rr0w · May 25, 2009

Проблема в том, когда в IE уменьшаешь, то блок обрезается.

Это не проблема, это фича!

И вообще, зачем эмулировать поведение таблицы, если есть таблица?

Sign In

Ломаем мозг :)

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information