Проблема с позиционированием блочных элементов

vuler · January 30, 2012

Здравствуйте.

У меня возникли небольшие проблемы с изображением блоков, помогите плиз.

В общем центральную страницу я делю на 3 блока. 1-й блок левый плавающий, 2-й по центру статический, 3-й плавает вправо.

В центральном блоке хочу сделать 2 блока, чтобы они делили область пополам. один делаю - плавать влево, второй - вправо.

но блоки вытесняют друг друга, если weidth:auto, когда ширина фиксирована, все нормально, но это не вариант, т.к. при маштабировании они могут смотреться просто ужасно(пустое поле между блоками). Помогите примерно как задать чтобы они грамотно рассположились, и каждый из них занял 50% от центральной области.

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

klierik · January 30, 2012

код в студию

vuler · January 30, 2012

Хорошо..вот примерный код.

test.php


<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<div id="top">
Шапка
</div>
<div id="main">
	<div id="main_left">

	</div>
	<div id="main_right">

	</div>
	<div id="main_center">
		<div id="news_left">
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		</div>
		<div id="news_right">
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		</div>
	</div>
</div>
</body>
</html>

Вот CSS файл к нему test.css


body
{
margin:0px;
}
#top
{
margin:5px 10px;
background-color:#ff0;
height:80px;
}
#main_left
{
float:left;
height:600px;
width:200px;
background-color:#f0f;
margin:0 10px;
}
#main_right
{
float:right;
height:600px;
width:200px;
background-color:#0ff;
margin:0 10px;
}
#main_center
{
height:600px;
width:auto;
background-color:#0f33f4;
margin:0 220px;
}
#news_left
{
float:left;
height:600px;
width:300px;
background-color:#f033f4;
margin:10px 10px;
}
#news_right
{
float:right;
height:600px;
width:300px;
background-color:#0ff3f4;
margin:10px 10px;
}

Вопрос по последним двум divaм. Тут приходится фиксировать размеры блоков width:300px; Но получается плохо,при маштабировании, то один блок под другой залезет, то при большом уменьшении, они разъедуться друг от друга. Можно сделать так, чтобы эти два блока заняли по 50% блока main_center и при уменьшении окна уменьшались вместе с ним, а при увеличении соответственно увеличивались. Заранее спс.

klierik · January 30, 2012

Но получается плохо,при маштабировании, то один блок под другой залезет, то при большом уменьшении, они разъедуться друг от друга. Можно сделать так, чтобы эти два блока заняли по 50% блока main_center и при уменьшении окна уменьшались вместе с ним, а при увеличении соответственно увеличивались. Заранее спс.

Если уж говрить про масштабирование то надо начинать читать от сюда: http://habrahabr.ru/blogs/css/21209/

vuler · January 30, 2012

Странно конечно, но вопрос решился с помощью таблицы, хотя где-то слышал что она очень грузит браузер и вообще это дело лучше не применять.

Может есть другой способ?


<div id="main_center">
		<table>
			<tr>
			<td> <div id="news_left">
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		</div>     </td>
		<td><div id="news_right">
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		text text text text text text text text text text text text
		</div>     </td>	
			</tr>
		<table>	
	</div>

Sign In

Проблема с позиционированием блочных элементов

Question

vuler

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

vuler

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

vuler

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information