Держать плавающие div в строке - PullRequest
Новая
       10

Держать плавающие div в строке

0 голосов
/ 16 января 2011

У меня возникают проблемы с корректной работой макета, у меня есть основной div и div боковой панели. Они оба float: left, если размер экрана изменен или если его просмотр на экране меньше, чем у меня (1920x1080 ) то div боковой панели опускается ниже основного содержимого.

Я пытался разместить обертку вокруг каждого элемента, но это не дает никакого эффекта. 

    <div id="header">       
        [Header]        
    </div>

    <div id="content">      
        [Content]       
    </div>

    <div id="sideBar">
        [SideBar]
    </div>

    <div id="footer">
        [Footer]
    </div>

body
{   
    width: 100%;
    color: #000000;
    background-color: #000000; 
    margin: 0;
    padding: 0; 
}

#header
{
    width: 100%;
    height: 110px;
    background-color: #336699;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;   
}

#content
{
    float: left;
    margin-left: 50px;
    width: 70%;
    height: 700px;  
    margin-top: 40px;       
    padding: 30px;
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

#sideBar
{
    float: left;    
    margin-left: 50px;  
    width: 15%; 
    height: 400px;
    margin-top: 40px;
    padding: 30px;
    background-color: #FFFFFF;  
}

#footer
{
    width: 100%;
    height: 80px;
    background-color: #174555;
    margin: 0px;
    padding: 0px;
    color: #ffffff; 
    clear: both;
}

Как правило, оба div'а должны изменять размер, пока не будет достигнут определенный размер, тогда прокрутка должна быть включена. Я почти уверен, что совершил что-то простое неправильно, но я не очень разбираюсь в дизайне.

Пример можно посмотреть здесь: Ссылка

Спасибо за любой совет:)

Ответы [ 2 ]

0 голосов
/ 16 января 2011

Карпи прав.

Кроме того, почему бы просто не начать с одного основного div, скажем, измерения шириной 1000px, а затем работать в этом? Если вы не можете этого сделать, выберите тип измерения, например, px, и придерживайтесь его для ширины, отступов и полей этих элементов. По крайней мере, это облегчило бы вашу математику и знало бы, сколько места у вас есть или нет.

Я обычно придерживаюсь относительных измерений, таких как пиксели (я не люблю абсолюты, это личное.: P).

EDIT

Хорошо, попробуйте это, добавьте обертку вокруг всей страницы (просто для проверки, так что держите меня в покое). Присвойте этой оболочке идентификатор типа # main-body или что-то еще и определите ширину. Установите ширину содержимого и боковой панели. Если вы минимизируете экран, боковая панель не должна опускаться ниже содержимого div. Однако он выйдет за пределы порта просмотра. 

/* Wrap all in #main-body with specified width */

#main-body{
    width:1000px;
    margin:0 auto;
}

/* give these elements a relative width */

#content
{
    float: left;
    margin-left: 50px;
    width:600px;
    height: 700px;  
    margin-top: 40px;       
    padding: 30px;
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

#sideBar
{
    float: left;
    width:100px;
    margin-left: 50px;  
    height: 400px;
    margin-top: 40px;
    padding: 30px;
    background-color: #FFFFFF;  
}

Извините за длину этого. : P

0 голосов
/ 16 января 2011

Вы смешиваете проценты и пиксели. Ширина 70% + отступы 30px + отступ 50px (все на content) + отступ 50px + ширина 15% + отступы 30px (все на sidebar) могут составить более 100%.

...