Как перемещать div вниз или вверх?

У меня есть две дивы, верхний ДИВ имеет стиль следующим образом:Как перемещать div вниз или вверх?

.context_left { 
    float:left; 
    display:inline-block; 
    width:775px; 
    padding-left:10px; 
    margin-top:20px; 
    min-height:450px; 
    margin-bottom:20px; 
}

пока что ДИВ ниже него есть стиль:

.footer { 
     width:100%; 
     height:54px; 
     display:block; 
     position: absolute; 
     margin-top:80px; 
     left:0; 
    }

когда ДИВ context_left изменяет его высота подъема ДИВ сноска остается на это position, я хочу переместить нижний колонтитул вниз, если context_left div изменяет его высоту. Может ли кто-нибудь помочь мне сделать это?

источник

2013-08-21 Nouman

Пока у вас есть подвал в абсолютном позиционировании оно не будет зависеть от потока. Без ясного представления о структуре я не могу ничего рекомендовать, но начинаю с удаления абсолютной позиции из .footer. Возможно, это тоже ясно, если в него втекает .context_left. –

Создание скрипки поможет понять реальные проблемы, отличные от положения: абсолютный в нижнем колонтитуле –

Будет ли это выглядеть так: http://jsfiddle.net/tLueq/? –

.footer { 
    width:100%; 
    height:54px; 
    display:block; 
    margin-top:80px; 
    left:0; 
}

Удалено из нижнего колонтитула position: absoulte. Попробуй это. Поскольку нижний колонтитул будет оставаться в том же положении до положения: абсолют остается в стиле.

источник

2013-08-21 11:07:14

У вас есть нижний колонтитул с положением: absolute ;. Это означает, что ваш нижний колонтитул должен быть незаметным, но унаследован от его родителя.

Попробуйте изменить абсолютный на относительный и посмотреть, если это то, что вы хотите.

источник

2013-08-21 11:08:56 Renato

ли вы пытаетесь добавить lign к вашему .footer

clear:both;

И удалить позицию: абсолютная;

источник

2013-08-21 11:08:57

Css:

.context_left { 
     float:left; 
     width:775px; 
     padding-left:10px; 
     margin-top:20px; 
     min-height:450px; 
     margin-bottom:20px; 
     display:inline-block; 

    } 


     .footer { 
      width:100%; 
      height:54px; 
      display: block; 
      clear:both; 
      margin-top:80px; 
      left:0; 

     }

Рабочая Fiddle:

источник

2013-08-21 11:17:12

Я не хочу иметь пробелы или поля слева и справа, из-за этого я использовал позицию: absolute; удалив это, я не могу делать то, что хочу, насколько я знаю, нет другого способа сделать это. – Nouman

Для этого вы можете добавить 'margin: 0;' в body. см. обновленную скрипту. @nouman –

любезно проверьте мою структуру макета http://jsfiddle.net/VWcYt, добавив margin: 0; к телу не работает для меня. @ Avin Varghese – Nouman

Если липкая сноска в нижней части страницы, что ищете, то это может помочь вам:

html { 
    width: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    /* the margin compensates the footer plus the footer's top margin */ 
    margin: 0 0 134px 0; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 54px; 
}

Нижний колонтитул всегда будет в нижней части окна просмотра браузера или ниже содержания.

Demo

Try before buy

источник

2013-08-21 11:21:13 insertusernamehere

Как перемещать div вниз или вверх?

ответ

Смежные вопросы