Как такое сверстать блоками?

MiHALbI4 · February 5, 2011

Имеется резиновый сайт (на картинке схема). Есть 3 блока div, фиксированные по высоте. Два серый блока так же фиксированы по ширине. Необходимо, чтобы центральный красный блок занимал все оставшееся место между двумя серыми и растягивался в зависимости от ширины сайта. Т.е. необходимо сделать как таблицу, но блоками div. Поддерка IE начиная с 7 версии. Пробовал через table-cell, но IE не понимает этого. Какие есть варианты?

klierik · February 5, 2011

попробуй так

.left-box {float:left;}
.right-box {float:right;}
.center-box {float: none;}

sigma77 · February 5, 2011

Вариант 1

.left {width: 200px; float: left}
.right {width: 200px; float: right}
.center {overflow: hidden; zoom: 1;}

Вариант 2

.left {width: 200px; float: left}
.right {width: 200px; float: right}
.center {margin-left: 200px; margin-right: 200px;}

Во 2-м случае не забудь после этого произвести очистку потока. Например, самое простое, задать футеру если он идет сразу после этих блоков) clear: both

htmlonline · February 5, 2011

Можешь попробовать:

<div class="main" style="width: 100%; height: высота основного блока;">
</div>
<div class="container" style="width:100%; height: высота;">
 <div class="fixed" style="height:100%; width: ширина; float:left;">
 </div>
 <div class="rizina" style="float:left; width: ширина в процентах; height: 100%">
 </div>
 <div class="fixed" style="width: ширина; height: 100%;">
 </div>
</div>

попробуй так

Если ты попробуешь это осуществить, то все блоки у тебя будут на следующей "строке"...

klierik · February 5, 2011

2 htmlonline,

ты хорошо ли подумал перед тем как сказал?

<!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=UTF-8" />
    <title>Untitled Document</title>

    <style type="text/css">

		* {
			margin:0; padding:0;
			}
			.case {
				overflow: hidden;
				}
				.left,
				.right,
				.center {
					height:200px; 
					}
				.left {
					float:left;
					width:200px;
					background:grey;
					}
				.right {
					float:right;
					width:100px;
					background:grey;
					}
				.center {
					float: none;
					background:red;
					}

    </style>

</head>

<body>

	<div class="case">

        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>

    </div>

</body>
</html>

А вот теперь расскажи мне почему твой код не подходит для решение этой задачи?

MiHALbI4 · February 5, 2011

Спасибо! Помогло)

htmlonline · February 5, 2011

Клерик, твой код тоже не работает...

Он будет работать только с position: absolute;

Я не понял почему мой код не работает...

У меня все работает... или может браузер тупой

Vlad · February 5, 2011

htmlonline, вы этот position: absolute вставляете в любой код, который видите. Может стоит почитать мануал и понять, что это и для чего?

htmlonline · February 5, 2011

Я без позишна делал, Влад....

psywalker · February 5, 2011

htmlonline

Дружище, ты всего два дня на форуме, а уже успел навести кипиш, задать 1000 глупых вопросов и дать не меньше вредных советов. Стоп, остановись, это делается не так. Успокойся и для начала сходи и прочитай книжку или этот сайт. Далее можешь уже что-то пробовать делать и задавать потихонечку вопросы.

htmlonline · February 5, 2011

Я полностью прочитал книжку по "html 4.0 Новый уровень создания документов!"

И весь этот сайт тоже прочел...

novicheG · February 5, 2011

Тебе можно писать "Вредные советы HTML", тоже кстати полезно

psywalker · February 5, 2011

Я полностью прочитал книжку по "html 4.0 Новый уровень создания документов!"
И весь этот сайт тоже прочел...

Я не верю тебе. Иначе ты бы задавал вопросы совсем другого уровня. Тут два варианта, либо ты нихрена не читал и нам тут чешешь, либо ты читал ради того, чтобы просто прочитать, третьего не дано.

htmlonline · February 5, 2011

Я тебе КЛЯНУСЬ я прочитал все, но другое дело у меня есть непонятные моменты...

Хорошо флудить, сам ругался ведь...

sigma77 · February 5, 2011

psywalker,

не обращай внимание, может и правда прочитал, но как учебник китайского

Чем больше будешь обращать на него внимания, тем больше глупых вопросов получишь в итоге.

psywalker · February 5, 2011

Нет, флуда тут нет, тут просто человек тебя пытается навести на верный путь.

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

http://forum.htmlbook.ru/index.php?showtop...mp;#entry180109

Первый вопрос, который сразу же возникает - ЗАЧЕМ? Зачем тебе вообще на данном этапе разбирать и знать, как работает градиент, тем-более какие то префиксы и т. д.??? Смысл, для чего? Куда ты его будешь вставлять, где применять и чему ты научишься, узнав эту вещь?

Человек, который не может отличить float; от position; уже лезет в градиенты и CSS3. Это по меньшей мере глупо и далеко неправильно.

Я настаиваю на том, чтобы ты прекратил свои допросы, открыл ещё раз сайт и ВНИМАТЕЛЬНО прочитал там каждый раздел из CSS2.1, причём чтобы всё это сопровождалось практикой.

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

Я понимаю, но почему-то захотелось помочь такому человеку. Возможно я в нём увидел лучик надежды, надеюсь что не ошибаюсь

deadrash · February 5, 2011

htmlonline

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

После того как ты его сверстаешь, или даже во время, мы будем тебя сильно критиковать, ругать, может даже бить (по желанию), и говорить что - так делать не надо, делай лучше так.

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

Если всё пройдёт хорошо может быть даже наберём группу небольшую типа студентов =))) ну это я уже гоню...

htmlonline · February 5, 2011

Спасибо Максиму, за то что верит в меня и видит во мне Лебедева

Спасибо и тебе Дедраш, за совет и постоянную поддержку!

Я без вас бы ничего не смог!

Vlad · February 5, 2011

Ребята, процесс воспитания нового Человека прошу перенести во Флейм.

klierik · February 6, 2011

Клерик, твой код тоже не работает...
Он будет работать только с position: absolute;
Я не понял почему мой код не работает...
У меня все работает... или может браузер тупой

а вот нормальный браузер говорит иначе

а вот твоя верстка не решает поставленную задачу.

Sign In

Как такое сверстать блоками?

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information