Форум Сайтостроение Веб-строительство

Подскажите с версткой

12
H
На сайте с 13.06.2011
Offline
9
Haubergeon
#11 

<!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" xml:lang="en" lang="en">

<head>

	<title>Title</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<style type="text/css">

		* { margin: 0; padding: 0; }

		.container {

			position: relative;

		}

		.left-column {

			width: 50%;

			float: left;

		}

		.left-column .wrapper {

			margin-right: 250px;

			background: yellow;

		}

		.right-column {

			width: 50%;

			float: right;

		}

		.right-column .wrapper {

			margin-left: 250px;

			background: green;

		}

		.center-column {

			position: absolute;

			margin-left: 50%;

		}

		.center-column .wrapper {

			width: 500px;

			margin-left: -250px;

			background: red;

		}

	</style>

</head>

<body>

<div class="container">

	<div class="center-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

	<div class="left-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

	<div class="right-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

</div>

</body>

</html>
Слово не воробей. Все не воробей, кроме воробья!
M
На сайте с 20.08.2004
Offline
376
Miracle
#12
Haubergeon:
<!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" xml:lang="en" lang="en">

<head>

	<title>Title</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<style type="text/css">

		* { margin: 0; padding: 0; }

		.container {

			position: relative;

		}

		.left-column {

			width: 50%;

			float: left;

		}

		.left-column .wrapper {

			margin-right: 250px;

			background: yellow;

		}

		.right-column {

			width: 50%;

			float: right;

		}

		.right-column .wrapper {

			margin-left: 250px;

			background: green;

		}

		.center-column {

			position: absolute;

			margin-left: 50%;

		}

		.center-column .wrapper {

			width: 500px;

			margin-left: -250px;

			background: red;

		}

	</style>

</head>

<body>

<div class="container">

	<div class="center-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

	<div class="left-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

	<div class="right-column">

		<div class="wrapper">

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

			<p>Lorem ipsum dolor sit amet, interpellastis suam ut casus turbata minim venisse in fuerat eum istam definisti quis mihi.</p>

		</div>

	</div>

</div>

</body>

</html>

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

у кого 7 , 8 и 9 ие, потестите пожалуйста

отец сыночка, лапочки дочки и еще одного сыночка
H
На сайте с 13.06.2011
Offline
9
Haubergeon
#13

упс, маленько лажанулся) Поправил, теперь ie 6+

	<style type="text/css">
		* { margin: 0; padding: 0; }
		.container {
			position: relative;
		}
		.left-column {
			width: 49%;
			float: left;
		}
		.left-column .wrapper {
			margin-right: 250px;
			background: yellow;
		}
		.right-column {
			width: 49%;
			float: right;
		}
		.right-column .wrapper {
			margin-left: 250px;
			background: green;
		}
		.center-column {		
			margin-left: 50%;
		}
		.center-column .wrapper {
			width: 500px;
			background: red;
			margin-left: -250px;
			position: absolute;
		}
	</style>
12

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