VPF::Расположение div-ов на странице

April

Дата 11.2.2007, 18:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 1.2.2007

Репутация: нет
Всего: нет

Не получается чтобы див № 2 и див № 3 были размещены на странице паралельно друг другу.
У меня выходит так, что див № 3 идёт под дивом № 2.

Вот код:

Код


<html>
<head>
<style>
.block1 { width: 1110px; height: 50px; background: lightblue; padding: 5px;  border: solid 1px black;}
.block2 { width: 120px; border-width:3px; color:red;  background: silver; padding: 5px; }
.block3 { width: 60px; height: 100%; background: lightblue; padding: 5px;  border: solid 1px black;}
</style>
</head>
<body>


<div class="block1" align="center"><h2>Заголовок</h2>див № 1</div>

<div style='background-color: lightblue; 
            width: 120px; 
            height: 600px; 
            border-style: solid;
            border-width: 1px;
            border-color: black;
            '>   

<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
Див № 2
</div>

<div style='background-color: lightblue; 
            width: 990px; 
            height: 100%; 
            border-style: solid;
            border-width: 1px;
            border-color: black;
            float: right'>
див № 3
</div>            


</body>
</html>

mishaSL

Дата 11.2.2007, 19:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

К примеру так:

Код


<html>
<head>
<style>
.block1 { width: 1110px; height: 50px; background: lightblue; padding: 5px;  border: solid 1px black; clear: both;}
.block2 { width: 120px; border-width:3px; color:red;  background: silver; padding: 5px; }
.block3 { width: 60px; height: 100%; background: lightblue; padding: 5px;  border: solid 1px black;}
</style>
</head>
<body>
<div class="block1" align="center"><h2>Заголовок</h2>див № 1</div>
<div style='background-color: lightblue; 
            width: 120px; 
            height: 600px; 
            border-style: solid;
            border-width: 1px;
            border-color: black;
            float: left;
            '>   
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
<a class='block2' href='#'><center>Link1</center></a>
Див № 2
</div>
<div style='background-color: lightblue; 
            width: 990px; 
            height: 100%; 
            border-style: solid;
            border-width: 1px;
            border-color: black;
            float: left'>
див № 3
</div>            
</body>
</html>

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

April

Дата 11.2.2007, 20:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 1.2.2007

Репутация: нет
Всего: нет

Спасибо.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »