Выравнивание div по горизонтали

Question

У меня есть этот код.

Желаем, чтобы div выравнивал синий с красным div, не затрагивая остальную часть страницы.

Обратите внимание, что div # leftcontent не попадает в конец страницы, и я не понимаю, почему. Возможно, решение состоит в том, чтобы поместить div # leftcontent в нижнюю часть страницы. Но как?

Спасибо.

Answer 1

CSS абсолютное позиционирование на помощь!

Сначала отбросьте фиксированный height и overflow:auto для div#wrap.Замените overflow:auto на overflow:hidden:

div#wrap
{
    width:1024px; 
    /*height:768px; /* Forget about it! */
    margin:5px auto;
    border:2px solid #ccc;
    /*overflow:auto;/* Forget about it! */ overflow:hidden;
    position:relative;
}

... теперь обратите внимание, что div#wrap имеет относительное положение:

div#wrap
{
    width:1024px; 
    margin:5px auto;
    border:2px solid #ccc;
    overflow:hidden;
    position:relative; /* AWESOME */
}

Это означает, что div#wrap нестатическипозиционируется, поэтому мы можем расположить вещи абсолютно внутри него ... как div#footer и div#social-networks:

div#wrap div#leftcontent div#footer {
    position:absolute;
    bottom:0px;
}
div#wrap div#nav div#social-networks {
    position:absolute;
    bottom:0px;
}

Это позволит расположить нижний край div#footer и div#social-networks 0px отнижний край его не статически расположенного предка - а именно, div#wrap.

Плохая новость: позиционирование вещей абсолютно может испортить естественный поток вещей, поэтому вы должны вручную зарезервировать некоторое пространство для div#footer и div#social-networks.Сделайте это с padding:

div#wrap
{
    width:1024px; 
    margin:5px auto;
    border:2px solid #ccc;
    overflow:hidden;
    position:relative;
    padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}

Answer 2

Вы должны изменить красный div:

bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/

проверить это: http://jsfiddle.net/85unG/48/

и для высоты причина, по которой он не касается дна:

div # wrap { высота: 768 пикселей; / должно быть 739 пикселей; / }