расположение 3 блоков div на одном уровне

Осенний Дождь · October 8, 2010

подскажите пожалуйста:

sidebar1 {float:left; width: 180px; background: #EADCAE; padding-bottom: 10px;}
.content {float:left; padding: 10px 0; width: 600px;}
.sidebar2 { width: 180px; background: #EADCAE; padding: 10px 0; margin-left: 780px;}

<div class="content"></div>
<div class="sidebar1"></div>
<div class="sidebar2"></div>

Как сделать так, чтобы все три дива на одном уровне располагались?

Визуально: слева сайдбар1... в центре контент, справа сайдбар2.

Не меняя очередности расположения самих дивов, чтобы <div class="content"></div> впереди в коде шел

psywalker · October 8, 2010

margin-left: 780px; - вместо этого последнему диву задать флоат: лефт

Осенний Дождь · October 8, 2010

margin-left: 780px; - вместо этого последнему диву задать флоат: лефт

не получается так, съезжает...

в таком случае визуально получается: слева контент , в центре сайдбар1, справа сайдбар

а нужно чтобы визуально было: слева сайдбар1... в центре контент, справа сайдбар2.

psywalker · October 8, 2010

не получается так, съезжает...

Не верю. Покажи код полностью.

Осенний Дождь · October 8, 2010

тут был код!

Edited October 8, 2010 by Осенний Дождь

psywalker · October 8, 2010

Сделай по этому принципу.

<!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></title>
	<style type="text/css">
	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}



	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");

	</style>
	<![endif]-->
</head>

<body>

	<div class="head">Header</div>

		<div class="wrap">
			<div class="content">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

			</div>
		</div>
		<div class="sidebar">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
		</div>
		<div class="right">
				<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

		</div>
		<div class="foot">Footer</div>


</body>
</html>

Осенний Дождь · October 8, 2010

psywalker огромное спасибо! отличный слой.. и в "дриме" не глючит...если не секрет, откуда он?

psywalker · October 8, 2010

psywalker огромное спасибо! отличный слой.. и в "дриме" не глючит...если не секрет, откуда он?

О каком слое идёт речь и причём тут дрим?

Осенний Дождь · October 8, 2010

О каком слое идёт речь и причём тут дрим?

ну.."заготовка" о вашем )

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

CoDy · October 9, 2010

psywalker огромное спасибо! отличный слой.. и в "дриме" не глючит...если не секрет, откуда он?

Мастреская CSS профессиональное применение WEB стандартов

Автор: Энди Бадд

Год издания: 2007

В этой книге в приложении А описывается похожий шаблон.

psywalker · October 9, 2010

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

Ну я же не виноват, что я верстальщик

Мастреская CSS профессиональное применение WEB стандартов
Автор: Энди Бадд
Год издания: 2007
В этой книге в приложении А описывается похожий шаблон.

Из этой книги я ничего не брал, честное слово)

npofopr · October 9, 2010

в дриме не все гладко отображается) и не надо смотреть чтобы в нем все отображалось гладко.

дримвивер лишь дает примерный вид страницы.

+ в дримвивере есть свои шаблоны, причем вроде точно такой же. и они тоже хорошо работают.

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

ну и csstemplater потыкал скопировал, работает. но дрим его вроде не правильно отобразит =)

psywalker · October 9, 2010

Самый лучший генератор - это руки.

Осенний Дождь · October 9, 2010

в дриме не все гладко отображается) и не надо смотреть чтобы в нем все отображалось гладко.
дримвивер лишь дает примерный вид страницы.
+ в дримвивере есть свои шаблоны, причем вроде точно такой же. и они тоже хорошо работают.
вообще не понятно откуда вопрос если вы работаете в дривмивере, или дрим что то другое?
ну и csstemplater потыкал скопировал, работает. но дрим его вроде не правильно отобразит =)

ну вот чтобы именно в редакторе норм отображалось для меня и критично..

Глючит там именно из-за отрицательных значений.. Дримовские встроенные шаблоны - да, юзал, но там подходящего не нашлось!

а по поводу ссылки - уже облазал кучу таких сайтов-генераторов везде криво. ТОлько 1 сайт нашел на котором шаблоны корректно работают в дриме...

npofopr · October 9, 2010

если вы будете искать шаблоны под дримвивер, то искренне соболезную.

вас это не сдвинет в развитии и большинство задач вы не сможете осуществить.

критичнее смотреть в IE. нежели в дримвивере.

Осенний Дождь · October 9, 2010

если вы будете искать шаблоны под дримвивер, то искренне соболезную.
вас это не сдвинет в развитии и большинство задач вы не сможете осуществить.
критичнее смотреть в IE. нежели в дримвивере.

шаблоны, как раз-таки, большинство там вполне нормально отображаются.

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

psywalker · October 9, 2010

Забудь про дримвивер, очень плохую ты привычку выработал, поверь мне наслово.

Sign In

расположение 3 блоков div на одном уровне

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information