VPF::Поля в div. - Форум программистов

Avaj

Дата 2.5.2010, 11:23 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 14.7.2008
Где: Владивосток.

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

Имею такой CSS:

Код



#container {
    width: 1000px;
    height: 900px;
    border-width: 1px;
    border-color: black;
    border-style: groove;
}


#leftdiv {
    width: 250px;
    padding: 10px;
    float: left;
}


#rightdiv {
    width: 750px;
    float: right;
}

и такой HTML:

Код


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="TestMainStyle.css" type="text/css"/>
    </head>
    <body>

        <div id="container">

            <div id="leftdiv">
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
                sdfgsdg fggggggdf hdfgjngf jkyhjfhy unjfgjgfjgfjgf jkghjfgj
             </div>

            
            <div id="rightdiv">
                dhjrtykjhjlgjk
            </div>


            <div style="clear:both;"></div>

        </div>

    </body>
</html>

и из-за полей в leftdiv, rightdiv не вмещается по ширине в container и проваливается под leftdiv.

А как же сделать поля так, чтоб они не расширяли div?

bars80080

Дата 2.5.2010, 11:35 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

учесть и вычесть. 730px для правого писать не пробовал?

MagicDew

Дата 2.5.2010, 14:25 (ссылка)

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

Загрузка ...

Новичок

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

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

Если используешь свойство "padding", то размер блока увеличивается на указанное значение, т.е.
если пишешь:

Код


#leftdiv {
    width: 250px;
    padding: 10px;
    float: left;
}

размер блока "#leftdiv" равен 270 пикселей (по 10 слева и справа)

Avaj

Дата 2.5.2010, 14:28 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 14.7.2008
Где: Владивосток.

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

Цитата

учесть и вычесть. 730px для правого писать не пробовал?

Т.е. только так?

bars80080

Дата 2.5.2010, 20:05 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

ну это же арифметика. а как иначе ты против законов математики в контейнер на 1000 пикселов собрался впихнуть полей на 750 + 250 пикселов, да ещё полей на 20 пикселов

Добавлено через 36 секунд
это тебе ещё надо будет посмотреть, не учтутся ли здесь бордюры на 2 пиксела внешнего контейнера

SelenIT

Дата 3.5.2010, 02:22 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Цитата(Avaj @ 2.5.2010, 14:28

)

Т.е. только так?

Если ширина по-любому фиксирована, то не вижу в этом проблемы.

Если проект для себя или для специфической аудитории, где можно послать лесом IE6-7 - можно заставить паддинги не прибавляться к ширине с помощью CSS3. Но для коммерческих сайтов это, очевидно, не вариант...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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