div won't go below adjecent div? - html

Question

I'm having a little issue here. This is my HTML.
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>
This is my CSS:
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
float: left;
}
My problem is that these divs are next to each other and not above the other.
It looks like this.
http://oi57.tinypic.com/2lm5e1i.jpg
I want the green one to be down the black one. I have tried a lot of things and I can't do it.
I forget, these divs are inside another DIV which is a container
here the css:
.rost{
height: 100%;
min-height: 300px;
background-color: #fff;
padding: 0px;
padding-left: 0px;
box-shadow: 0 0 28px rgba(0, 0, 0, .6);
display: flex;
display: -webkit-box;
}
Here is the JSFIDDLE: http://jsfiddle.net/aemgm73z/

Answer 1

try adding clear:both; to .two class
.two{
clear:both;
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}

Answer 2

Remove display: -webkit-box and display: flex from your parent container.
As far as the second div goes it seems you've put the <li> elements within the <a> elements which is why they are spilling out of the divs. The child divs ARE in the parent divs but because you've enclosed the links the other way round the divs aren't expanding to wrap around them
You can see this point by assigning a fixed height, say 1000px to .lista div and upon inspection find that .rost does enclose both the divs.
Swapping the li and a tags should work for you.

Answer 3

Do you have any specific reason to include float: left into your css? After removing that, things are working as you expect.
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
background-color: green;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
}
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>

Answer 4

Remove disply:block and margin-top:0px property from your style

Answer 5

Try adding display:block; to your .one style, this will make the green div bump down onto the next line.