Проблема с резиновой версткой

fest · June 6, 2011

Подскажите, пожалуйста.

Есть два блока, соответственно float:right;(left)

Они разного размера, условно, первый 200px второй 400px

Между ними нужно сделать разделитель, который всегда будет посередине (относительно блоков).

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<div class="middle" style="height: 366px;">
		<div class="sidebar" id="sideLeft">
		<h2>Text1</h2>
		</div><!-- .sidebar#sideLeft -->

		<div class="sidebar" id="sideRight">
			<h2>Text2</h2>
		</div><!-- .sidebar#sideRight -->

</div>

/* Middle
—————————————————————————--*/
.middle {
 background: url(images/sep.png) repeat-y scroll 44% top transparent;
position: relative;
top: 25px;
}

/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 260px;
	position: relative;
	height: 300px;
	padding: 20px;
	margin: 10px 0 0 50px;


}


/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: right;
	width: 360px;
	position: relative;
	background: #FFACAA;
	height: 300px;
	padding: 20px;
	margin: 10px 50px 0 0;
}

Буду благодарен за помощь.

Edited June 6, 2011 by fest

Searcher · June 7, 2011

Если вы хотите, чтобы разделитель зависел от расположения и размеров блоков, то и ставьте его в один поток с ними. Вариантов много, например, сделайте разделитель в плавающем блоке и пусть он следует за левым блоком. И правый блок не надо float:right, тоже пусть идет следом (float:left). Его можно сделать вообще и не плавающим, а просто отрегулировать положение левым марджином...

Sign In

Проблема с резиновой версткой

Question

fest

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information