Резиновая верстка

nickostyle · October 26, 2010

Привет всем!

Только начал вникать, так что не пинайте

проблема в следующем - есть два дива:

<div class="div1"> </div>

<div class="div2">ТУТ ВЫВОДЯТСЯ КОММЕНТАРИИ</div>

в css

.div1 {float: left;}
.div2 {float: left;}

Т.е. я добился того, первый див обтекается вторым и они располагаются на одном уровне. Однако мне необходимо сделать так, чтобы при развернутом окне броузера получалось так:

http://www.picatom.com/1o/img/1-5358.jpg

Т.е. именно так, как у меня и получилось.

А при уменьшении окна до максимума так:

http://www.picatom.com/1o/img/2-3528.jpg

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

Как это сделать?

У меня получилось с процентами: т.е. я указал ширину дивов в процентах, но при максимальном уменьшении окна броузера первый див не уменьшается до нуля! Подскажите, что делать? заранее спасибо!

upd: Прикинул решение:

не нужно делать два дива. Можно сделать один див, родительский, а в нем еще один, тот самый, в котором комментарии.

<div style="width: 100%;" align='right'>
<div style="width: 90%;">Cooments</div>
</div>

За счет того, что внутренний див на 10 процентов меньше, будет создаваться отступ от левого края родительского дива. Еще не пробовал

Edited October 26, 2010 by nickostyle

psywalker · October 26, 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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body{
			margin:0;
			min-width:600px;
			_width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");
		}
		#wrapper{
			width:100%;
			position:relative;
			overflow:hidden;
		}
		.w1{
			float:left;
			position:relative;
			left:50%;
			width:100%;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		.w2{
			float:left;
			position:relative;
			left:-50%;
			width:100%;
		}
		#content{
			overflow:hidden;
			height:1%;
			padding:0 10px;
		}
		#left{
			width:100px;
			float:left;
		}

	</style>
</head>
<body>
	<div id="wrapper">
		<div class="w1">
			<div class="w2">
				<div id="left">
					<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea.</p>
				</div>

				<div id="content">
					<p>Lorem ipsum dolor sit amet consectetuer consequat Vestibulum vitae mi Morbi. Sem et quis tempor at et urna Vestibulum pellentesque eu Nam. Pharetra sed nec Aliquam nibh elit Vivamus Donec Suspendisse convallis nibh. Consequat pellentesque fringilla lacinia condimentum Ut leo id gravida.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

nickostyle · October 26, 2010

Спасибо огромное за решение! Но теперь мне бы понять, как оно работает! Как я ни крутил, ни менял значения в css, все равно не понял механизм работы. Было бы хорошо, если б я верстал страницу с нуля, а я занимаюсь шаблоном для движка с уже готовой версткой, там вообще...туши свет) Если бы я знал, как это работает, смог бы соеринтироваться! Буду благодарен, честно!

Edited October 26, 2010 by nickostyle

Sign In

Резиновая верстка

Question

nickostyle

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

nickostyle

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information