3 колонки внутри 3 колонок :)

Coffin · June 19, 2012

Сделал 3х колоночную верстку.

Пытаюсь в левомй панеле сделать опять 3 колонки для того, что бы в

блок 1 вставить угол декора

в блок 2 линию

блок 3 другой угод декора

Так вот 1-2 идут в ряд, а блок 3 слетает вниз. Но почеееееему ????

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">

<div id="header">Шапка </div>
<div id="menu">Меню</div>

<div id="left">
		<div id="left_corner">1</div>
		<div id="panel_line">2</div>
		<div id="right_corner">3</div>
</div>
<div id="right">Правая колонка</div>
<div id="content">Центральная</div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>


body, html {
	margin:0px;
	padding:0px;
	background-repeat: no-repeat;
	height: 100%;
	min-height: 100%;
}

#maket {
	border: 1px solid white;
	width: 100%;
	margin: 0 50px 0 50px;
	height: 100%;

}

#header{
	border: 1px solid red;
	height: 225px;
}
#menu{
	border: 1px solid green;
	height: 40px;
	margin: 0 0 10px 0;
}
#left{
	border: 1px solid #00C0C0;
	width:200px;
	float:left;
}

#right{
	width:200px;
	border: 1px solid #FFFF00;
	float:right;
}

#content{
	border: 1px solid #8080FF;
	margin-left:202px;
	margin-right:202px;
}

#left_corner{
	border: 1px solid blue;
	float:left;
}

#right_corner{
	border: 1px solid blue;
	float:right;

}

#panel_line{
	border: 1px solid red;
	margin-left:12px;
	margin-right:12px;
}


#footer{
	border: 1px solid red;
	clear:both;
}

Avalon4eg · June 19, 2012

#panel_line {
float:left
}

Burevestnik · June 19, 2012

поменяйте местами div-ы чтобы было так


<div id="right_corner">3</div>
<div id="panel_line">2</div>

#panel_line {
float:left
}

Если использовать этот вариант то нужно еще указать width

Edited June 19, 2012 by Burevestnik

Coffin · June 19, 2012

Если так сделать, как вы говорите, то блок 2 не тянется от блок 1 до блока 3.

Надо, что бы он растягивался.

Если указывать width 100%, то он вылезает за границы #left.

Edited June 19, 2012 by Coffin

Burevestnik · June 19, 2012

Если так сделать, как вы говорите, то блок 2 не тянется от блок 1 до блока 3.
Надо, что бы он растягивался.
Если указывать width 100%, то он вылезает за границы #left.

вот то о чем писал выше, просто поменяйте местами div-ы

Coffin · June 19, 2012

Спасибо.

А почему так, не объясните ?

Edited June 19, 2012 by Coffin

Coffin · June 19, 2012

А что сделать, что бы

Блок 1 фиксированной ширины

Блок 2 фиксированной

Блок 3 растягивается

?

Avalon4eg · June 19, 2012

min-width: 100% может?

Coffin · June 19, 2012

min-width: 100% может?

Тогда блок скидывает вниз.

Burevestnik · June 19, 2012

А что сделать, что бы
Блок 1 фиксированной ширины
Блок 2 фиксированной
Блок 3 растягивается
?

Если высота одинаковая то блок 1 и блок 2 float:left; а блок 3 margin-left:<сумма ширины блока 1 и блока 2>

P.S. вот - если я правильно понял требуемое)

Спасибо.
А почему так, не объясните ?

Объяснения не знаю нужны ли.... если вы посмотрите СВОЙ макет (каркас три колонки) у вас сделано также вначале идет left (float:left) потом right (float:right)и уже потом центральная часть

вот тут советую почитать очень доступно изложено

Edited June 19, 2012 by Burevestnik

Coffin · June 19, 2012

А что сделать, что бы
Блок 1 фиксированной ширины
Блок 2 фиксированной
Блок 3 растягивается
?
Если высота одинаковая то блок 1 и блок 2 float:left; а блок 3 margin-left:<сумма ширины блока 1 и блока 2>
P.S. вот - если я правильно понял требуемое)
Спасибо.
А почему так, не объясните ?
Объяснения не знаю нужны ли.... если вы посмотрите СВОЙ макет (каркас три колонки) у вас сделано также вначале идет left (float:left) потом right (float:right)и уже потом центральная часть
вот тут советую почитать очень доступно изложено

Спасибо.

Coffin · June 19, 2012

Теперь следующий вопрос, если не надоел еще.

http://jsfiddle.net/bsUyw/

как желтые и зеленые блоки сделать одинаковыми по длине в зависимости от контента в самом длинном блоке ?

Куда только не писал height: 100%

Edited June 19, 2012 by Coffin

Burevestnik · June 20, 2012

Теперь следующий вопрос, если не надоел еще.
http://jsfiddle.net/bsUyw/
как желтые и зеленые блоки сделать одинаковыми по длине в зависимости от контента в самом длинном блоке ?
Куда только не писал height: 100%

вот тут советую посмотреть

atew · June 20, 2012

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

Burevestnik · June 20, 2012

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

Использование таблиц или div на мой взгляд вытекает из поставленной задачи, в данном конкретном примере, как я понял, это макет всей страницы, в связи с этим (лично для меня) удобнее макет страниц делать на div-ах.

P.S. Конечно же это можно сделать и на таблицах. Но на мой взгляд таблицы нужно применять только для табличный данных - ну это чисто мое мнение )

Coffin · June 20, 2012

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

Хотелось бы все сделать на div'a.

И дивы рендерятся быстрее, чем таблицы

Sign In

3 колонки внутри 3 колонок :)

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information