Размещение двух divs один ниже другого

У меня возникают проблемы с размещением двух divs один ниже другого.

Я попробовал некоторые решения, найденные в Stackoverflow, как показано ниже.
Но ничего не работает.

HTML:

   <div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>

CSS

#wrapper{position: absolute;}
#up{position: absolute; float:left;}
#down{position: absolute; float:left; clear:left;}

Здесь Моя попытка,

Fiddle

Помощь будет оценена.

Ответы

Ответ 1

Удалите CSS. Теги DIV являются блочными элементами и, естественно, будут стекать по странице. Вы плаваете, чтобы они отображались бок о бок.

Особенно удалите атрибуты "float".

Ответ 2

Как работает DIV по умолчанию, просто удалите свой css. См. Рабочий пример здесь: jsfiddle

<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>

Ответ 3

Я не уверен, хотите ли вы, чтобы внешний div был больше высоты страницы, но что это делает:

#DivSlider
{
    width:100%;
    position:absolute; 
    height:170%;
    background-color:green;
}

#DivHome
{
    height:26%;
    background-color:orange;
    border:1px solid black; /* You were missing the 'px' here */
}

#DivSkills
{
    height:25%;
    background-color:white;
    border:1px solid black;
}