Проблема позиционирования HTML-CSS с div

Question

У меня небольшая проблема, и, кажется, все, что я тестирую, работает.

Мой HTML:

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div></div>
    <div id="content">Here comes random stuff<div>
        </div>

        <div id="bottom">Footer</div>

CSS:

#top_parent {
    background:#f00;
    height:100px;
}

#top{
    background:#0f0;
    float:right;
    position:relative;   
    height:100px;
    width:50%;
}
#content{
    top:-50px;
    background:#00f;
    <!--   position:relative;-->
    height:100px;
    width:80%;
    margin:auto;
}
#parent{
    background:#000;
    height:350px;
    width:100%; 
}

#bottom {
    height: 50px;
    background:#ff0;
    bottom:0px;
    <!--position:absolute; -->
    <!--position:relative; -->
}

Теперь моя проблема в том, что нижний колонтитул не попадает в раздел parent, он остается в области содержимого. Что я делаю не так?

jsF ссылка: мой источник

Спасибо за помощь.

Answer 1

Вы не закрыли этот div:

<div id="content">Here comes random stuff<div>

Должно быть:

<div id="content">Here comes random stuff</div>

Вы могли бы легко это увидеть, если бы вы указали отступ для своих элементов:

<div id="parent">
  <div id="top_parent">Top_background
    <div id="top">Top_Picture</div>
  </div>
  <div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>

Answer 2

Для того, чтобы расположить нижний колонтитул после div содержимого, вы должны сначала поместить div содержимого и затем добавить команду clear: both css в нижний колонтитул. Таким образом, ваше дерево должно выглядеть так :::

<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>

Для этого примера ваш css должен выглядеть следующим образом :::

div.wrapper { ширина: 80%;
положение: относительное;
поле: 0 авто;
}

div.left { плавать: слева;
ширина: 60%;
фон: зеленый;
высота: 200px; / высота только для тестирования, чтобы вы могли видеть результат / }

div.right { плавать: правильно;
ширина: 30%;
фон: красный;
высота: 200px; / высота только для тестирования, чтобы вы могли видеть результат / }

div.footer { ясно: оба;
высота: 40px; / высота только для тестирования, чтобы вы могли видеть результат / фон: желтый;
ширина: 100%;
} * * Тысяча двадцать-один

Answer 3

Я думаю, у вас неправильный HTML:

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div></div>
    <div id="content">Here comes random stuff<div>
        </div>

        <div id="bottom">Footer</div>

Вы не закрыли div parent и не оставили содержимое

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div>
    </div>
    <div id="content">Here comes random stuff</div>
    <div id="bottom">Footer</div>
</div>

Интерпретация того, что вам нужен "нижний" div внутри "parent", иначе:

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div>
    </div>
    <div id="content">Here comes random stuff</div>
</div>    
<div id="bottom">Footer</div>

Кроме того, в вашем css вы должны включить положение: относительное для #content div, иначе параметр top не будет работать. Попробуйте, если это решит проблему.

Answer 4

Не уверен, что вы вставили копию или это опечатка, когда вы опубликовали свой код, но эта строка:

<div id="content">Here comes random stuff<div>

должна иметь закрывающий тег </div> в конце вместо этого открытия<div> тег.Если это на самом деле ваш HTML, то он не будет группировать div так, как вы хотите / ожидаете.

Answer 5

Вы пытались убрать этот атрибут "bottom" в правиле #bottom?