CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 63

div won't go below adjecent div?

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/

Upvotes: 1

Views: 551

Answers (5)

Flame of udun
Flame of udun

Reputation: 2237

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.

Upvotes: 0

Lee
Lee

Reputation: 4323

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

Upvotes: 0

Lepanto
Lepanto

Reputation: 1413

try adding clear:both; to .two class

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

Upvotes: 2

Waqas Khan
Waqas Khan

Reputation: 257

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

Upvotes: 0

niyasc
niyasc

Reputation: 4490

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>

Upvotes: 0

Related Questions