Форум Сайтостроение Веб-строительство

Верстка DIV блоками

T
На сайте с 14.10.2009
Offline
3
TRSteep
622

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

Проблема следующая:

Никак не могу найти информацию о том как сделать 3 блока дивами.

С условием что:

Первый и третий с точно заданным размером, а средний занимает все по ширине.

Сейчас поставил как

первый width:25%;float:left;

второй width:50%;float:left;

третий width:25%;float:left;

Но если монитор широкий крайние колонки неприемлимо большие.

Если же писать

первый width:250px;float:left;

второй width 100%;float:left;

третий width:250px;float:left;

если убрать float:left; то идет первый потом второй(когда первый кончается то второй расползается на всю область), третий на отдельной строке

если третьему поставить float:right; он уходит направо, но опять в третьей строке

то каждый блок уходит на отдельную строку.

пробовал так же через margin-left:

второй блок уходит как надо, а третьему неизвестно - ведь блок плавающий

Как можно решить эту проблему?

-------------------------------------------------------------------------------

Решение

TRSteep добавил 06.01.2010 в 08:40

хех мутил мутил в итоге дошел до такого

первый width:250px;float:left;

второй margin-left:250px; margin-right:250px;

третий width:250px; position: absolute; top: 0px; right: 0px;

вот так - насколько правильно незнаю буду тестировать

если есть другие варианта просьба отписаться.

спасибо!

Все движется к лучшему! freestee.ru
I
На сайте с 21.02.2008
Offline
117
ippoman
#1

Если вам надо подстраиватся под разные разрешения, то это можно делать так:


<html>
<head>

<title>Div</title>
<style type="text/css">
#d1 { width:25%;float:left; background: green;}
#d2 { width:50%;float:left; background: silver;}
#d3 { width:25%;float:left; background: green;}
</style>

</head>
<body>

<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>

<script language="JavaScript">
//Изменяем первый див в зависимости от горизонтального разрешения экрана
if ( screen.width > 1024 ) {
document.getElementById('d1').style.width = '100px';
}
</script>

</body>
</html>
T
На сайте с 14.10.2009
Offline
3
TRSteep
#2
ippoman:
Если вам надо подстраиватся под разные разрешения, то это можно делать так:

хм.. интересненько.

Просто я с javascript пока не связывался.

Да и сам выключаю его часто, поэтому хочется на чистом CSS.

Хотя в копилку свою положу спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий