Jump to content
  • 0

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


vuler
 Share

Question

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

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

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

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

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

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

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 и при уменьшении окна уменьшались вместе с ним, а при увеличении соответственно увеличивались. Заранее спс.

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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


<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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy