CODEWITHSUNDEEP
htmlcss
iliketolearn
iliketolearn

Reputation: 710

Why won't divs occupy specified space?

I have a wrapper div with a width of 900px. In that I have two divs with widths of 400px and 500px. I can't figure out why these divs won't occupy at least the 900px of the wrapper. 

   .wrapper{
   background:blue;
   width:900px;
   height:250px;
   }

   .div1{
   background:yellow;
   height:250px;
   width:400px;
   float:left;
   }

   .div2{
   background:orange;
   height:250px;
   width: 500px;
   }

   .div2 li {
   display: list-item;
   list-style-type: none;
   }


   <div class="wrapper">
   <div class="div1"><img src="https://lh6.googleusercontent.com/-gMmeweshbOo/Up307AA-         1hI/AAAAAAAAAGE/cU_E9cGjWks/w400-h300-no/google_trans.png"></div>
   <div class="div2">
   <h2>Important Documents<h2>

   <ul>
   <li><a href="" target="_blank">Link1</a></li>

   <li><a href="" target="_blank">Link2</a></li>

   <li><a href="" target="_blank">Link3</a></li>

   <li><a href="" target="_blank">Link4</a></li>

   <li><a href="" target="_blank">Link5</a></li>
   </ul>


   </div>
   </div>

http://codepen.io/anon/pen/swbpC

Upvotes: 1

Views: 63

Answers (4)

Henk Jansen
Henk Jansen

Reputation: 1142

Try this: 

  .div2
   {
      background:orange;
      height:250px;
      width: 500px;
      float:left;
   }

add float:left to the div2 as well

Upvotes: 3

2kreate
2kreate

Reputation: 148

When I tested your code, both divs had the correct width as-is. However, the div2 element was being pushed underneath the div1 element. div2 is lacking the float:right property. I believe this is what you are attempting to do.

Upvotes: 0

str
str

Reputation: 44969

You need to add overflow:auto; to .div2 so that its content does not overflow the container.

Upvotes: 0

Volvox
Volvox

Reputation: 1649

.div2{
background:orange;
height:250px;
width: 500px;
float:left; //HERE!!
}

Upvotes: 1

Related Questions