Помогите, пожалуйста, очень срочно
179 повідомлень
#16 років тому
Как сделать верстку дивами.. таким образом чтобы 2й див раздвигался на всю свободную площадь сам.
<div style="float:left; width:200px; height:200px; background-color:#E6E6E6">
</div>
<div style="float:left; background-color:#09F; width:500px; height:200px;">
</div>
<div style="float:right; width:200px; height:200px; background-color:#E6E6E6">
</div>
8018 повідомлень
#16 років тому
Я нихрена не шарю в верстке, но если задать width не 500 пикселей, а 100% - не поможет?
4109 повідомлень
#16 років тому
Цитата:Я нихрена не шарю в верстке, но если задать width не 500 пикселей, а 100% - не поможет?
Он прав
130 повідомлень
#16 років тому
Второму div-у пераметр width просто задавать не надо,а сделать отступы левым и правым маргином
179 повідомлень
#16 років тому
Цитата ("birusa"):Второму div-у пераметр width просто задавать не надо,
а сделать отступы левым и правым маргином
гениально! )) и он тогда будет форматироваться опираясь на информацию .. точняк
31 повідомлення
#16 років тому
Ну для начала можно было в гугл зайти.Это style.css
html,body{height:100%;}
body{padding:0;margin:0;}
body{background:#fff url(../i/left.gif) repeat-y;font:11px tahoma,arial,serif;color:#000;}
#main,#bottom{min-width:780px;width:expression((document.documentElement.clientWidth||document.body.clientWidth)<780?'780px':'auto');}
#main{height:100%;margin:0 0 -120px;min-height:100%;background:url(../i/right.gif) repeat-y 100% 0;}
html>body #main{height:auto;}
#clear{height:120px;font-size:1px;clear:both;}
#container{float:left;width:100%;margin:0 -200px 0 0;}
#out{margin:0 200px 0 0;}
#in{width:100%;}
#top{height:75px;background:#d7dabd;border-bottom:1px solid #a7aa8d;}
#top .content{padding:10px;}
#center{float:right;width:100%;margin:0 0 0 -200px;}
#center .content{margin:0 0 0 200px;padding:10px 10px 10px 5px;}
p{margin:0;padding:0 0 10px;}
#left{float:left;width:200px;}
#left .content{position:relative;padding:10px 5px 10px 10px;}
#right{float:right;width:200px;}
#right .content{position:relative;padding:10px;}
#bottom{height:120px;background-color:#d7dabd;}
#bottom .content{padding:10px;border-top:1px solid #a7aa8d;}
А вот сама страничка
<?xml version="1.0" encoding="utf-8"?>
<!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="ru" lang="ru">
<head>
<title>Трехколоночная верстка</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="main">
<div id="top">
<div class="content">Верхний контент</div>
</div>
<div id="right">
<div class="content">
<p>Текст правой колонки</p>
<p>Текст правой колонки</p>
<p><a href="#">Ссылка</a></p>
</div>
</div>
<div id="container">
<div id="out">
<div id="in">
<div id="left">
<div class="content">
<p>Текст левой колонки</p>
<p>Текст левой колонки</p>
<p><a href="#">Ссылка</a></p>
</div>
</div>
<div id="center">
<div class="content">
<p>Текст центральной колонки</p>
<p>Текст центральной колонки</p>
<p><a href="#">Ссылка</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="bottom">
<div class="content">Нижний контент</div>
</div>
</body>
</html>
вот что выйдет в итоге .. посилання
Я думаю это поможет если поковыряешься.
31 повідомлення
#16 років тому
Tyta Заметь что в коде правая колонка идет первее чем левая =)
4109 повідомлень
#16 років тому
Wildcat Блин сори мы уже с тобой как то разговаривали на эту тему !Блин во я дурак я вечно забываю и путаю тебя=)
31 повідомлення
#16 років тому
Цитата ("tyta"):GodsCrap да я уже заметил.. хитрая тема.. спасибки большое
Вот из-за таких хитростей я не люблю <div>