страница в три колонки

Lakrein · November 22, 2011

Всем привет. Подскажите пжл.

Есть 3 колонки. Центральная должна быть 1000px, по центру. Левая и правая одинаковой ширины в зависимости от свободного места в окне.

Не нашел подходящего решения в нете.А может я не умею пользоваться гуглом :blush:

paska · November 22, 2011

Всем привет. Подскажите пжл.
Есть 3 колонки. Центральная должна быть 1000px, по центру. Левая и правая одинаковой ширины в зависимости от свободного места в окне.
Не нашел подходящего решения в нете.А может я не умею пользоваться гуглом

корень каждого не умею лежит в "не хочу".

den4ik · November 22, 2011

Попробуй этот сайт http://csstemplater.com/

Lakrein · November 22, 2011

Дело в том, что мне нужно сделать резиновыми колонки слева и справа, а центр фиксированым. Пробовал центр резиновый-все ок.

Great Rash · November 22, 2011

<!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>Menu</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px "Trebuchet MS", Verdana, Tahoma, sans-serif;
			color: #000;
		}

		body {
			margin: 10px;
		}

		.wrapper {
			position: relative;
			overflow: hidden;
		}

		.left,
		.center,
		.right,
		.left-inner,
		.right-inner {
			padding-bottom: 32767px;
			margin-bottom: -32767px;
		}

		.left {
			float: left;
			width: 50%;
			//margin-left: -1px;
			background: #ccc;
		}

		.left-inner {
			margin-right: 500px;
			background: #cee;
		}

		.right {
			float: right;
			width: 50%;
			margin-left: -500px;
			background: #ccc;
		}

		.right-inner {
			margin-left: 500px;
			background: #cee;
		}

		.center {
			float: left;
			position: relative;
			z-index: 1;
			width: 1000px;
			margin-left: -500px;
			background: #ccc;
		}
	</style>
</head>

<body>

	<div class="wrapper">
		<div class="left">
			<div class="left-inner">left</div>
		</div>

		<div class="center">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus purus tellus. Aliquam leo enim, hendrerit non cursus non, 
			pellentesque id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vehicula 
			vulputate dui, at scelerisque mauris cursus eu. Integer nec elit vitae ipsum varius volutpat nec vel dolor. <a href="#">Duis</a> tincidunt augue 
			quis nisl consequat condimentum. Nulla facilisi. Vestibulum ornare feugiat mollis. Aliquam vel nunc a sem hendrerit pretium. Morbi 
			convallis posuere hmollis.
		</div>

		<div class="right">
			<div class="right-inner">right</div>
		</div>
	</div>

</body>
</html>

Lakrein · November 22, 2011

Почти то, что мне нужно(У вас при уменьшении окна меньше 1000px center скатывается). Спасибо

Great Rash · November 22, 2011

min-width для <body>, я показал пример, дальше попробуйте пораскинуть мозгами...

Lakrein · November 22, 2011

min-width для <body>, я показал пример, дальше попробуйте пораскинуть мозгами...

Да-да я уже подделал под свои нужды. Еще раз благодарю.

Sign In

страница в три колонки

Question

Lakrein

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

paska

Link to comment

Share on other sites

den4ik

Link to comment

Share on other sites

Lakrein

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Lakrein

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Lakrein

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information