Расположение одного дива относительно другого

n1kola · November 6, 2012

Доброго времени суток.

Нужно решить следующую задачу:

идут 2 дива:

Оба дива имеют 100% ширину, div1 - фиксированной высоты, div2 на различных страницах имеет различную высоту. Как сделать, чтобы по html коду div1 шел раньше, чем div2, а на странице - наоборот (чтобы на странице отображался сначала div2, а потом div1)?

Расскажу немного поподробнее. Дивы на странице идут следующим образом:

<div>Шапка</div>

<div>Горизонтальное меню</div>

<div>Основа (контент)</div>

<div>Футер</div>

В html коде нужно чтобы меню шло после контента, а на странице отображалось до контента.

ils · November 7, 2012

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Page</title>
		<style>
			.wrapper {
				width: 960px;
				margin: 0 auto;
				position: relative;
			}
			.header {
				background: red;
				height: 50px;
			}
			.content {
				background: green;
				margin-top: 30px;
			}
			.menu {
				background: blue;
				height: 30px;
				position: absolute;
				top: 50px;
				width: 100%;
			}
			.footer {
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="header">header</div>
			<div class="content">content</div>
			<div class="menu">menu</div>
			<div class="footer">footer</div>
		</div>
	</body>
</html>

n1kola · November 7, 2012

On 11/7/2012 at 7:15 AM, ils said:

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Page</title>
		<style>
			.wrapper {
				width: 960px;
				margin: 0 auto;
				position: relative;
			}
			.header {
				background: red;
				height: 50px;
			}
			.content {
				background: green;
				margin-top: 30px;
			}
			.menu {
				background: blue;
				height: 30px;
				position: absolute;
				top: 50px;
				width: 100%;
			}
			.footer {
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="header">header</div>
			<div class="content">content</div>
			<div class="menu">menu</div>
			<div class="footer">footer</div>
		</div>
	</body>
</html>

Большое спасибо.

Sign In

Расположение одного дива относительно другого

Question

n1kola

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

ils

Link to comment

Share on other sites

n1kola

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information