Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Поля в div.


Автор: Avaj 2.5.2010, 11:23
Имею такой 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
учесть и вычесть. 730px для правого писать не пробовал?

Автор: MagicDew 2.5.2010, 14:25
Если используешь свойство "padding", то размер блока увеличивается на указанное значение, т.е.
если пишешь:
Код

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


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

Автор: Avaj 2.5.2010, 14:28
Цитата

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


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

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

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

Автор: SelenIT 3.5.2010, 02:22
Цитата(Avaj @  2.5.2010,  14:28 Найти цитируемый пост)
Т.е. только так?

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

Если проект для себя или для специфической аудитории, где можно послать лесом IE6-7 - можно заставить паддинги не прибавляться к ширине http://cssing.org.ua/2008/11/14/css3-box-model-progress/. Но для коммерческих сайтов это, очевидно, не вариант...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)