li element won't properly wrap within its container

Question

I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.

My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.

Here is my code

HTML :

<div class="content-box">
   <h3 class="box-header">Recent Files</h3>
   <ul class="horizontal-content">
       <li>
          <div class="filebox">
          </div>
       </li>
   </ul>
</div>

and the css :

.content-box {
   position:relative;
   width:800px;
   border:1px solid #dadada;
   margin-left:10px;
   padding:10px;
}

ul.horizontal-content {
    list-style:none outside none;
}

ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}

.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}

Now you see all of my code, please help me figure out what I have done wrong.

can you recreate the problem in http://jsfiddle.net/arunpjohny/HPfPG/1/ — Arun P Johny, Dec 20 '13 at 04:56
Take a look at http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504 — Mr. Alien, Dec 20 '13 at 05:00
Nota : apply the float:left attribute to the li tag to make it horizontal **is not mandatory**, try display:inline-block — Milche Patern, Dec 20 '13 at 05:08
Well there's a war here between `float` and `inline-block` so if you are confused than give some time and read [this](http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/) — Mr. Alien, Dec 20 '13 at 05:20

score 0 · Answer 1 · answered Dec 20 '13 at 04:56

0

You dont really need float:left to make it horizontal. Just add display:inline-block and remove float

ul.horizontal-content > li {
  padding:10px;
  background:grey;
  display:inline-block
}

DEMO

answered Dec 20 '13 at 04:56

Sowmya

26,684
21
96
136

Why make it `inline-block`, just `clear` the `float` http://jsfiddle.net/HPfPG/2/ – Mr. Alien Dec 20 '13 at 05:01
why use float:left when it is really not necessary.. OP is using float to make li horizontal, so in that case inline is the best way. – Sowmya Dec 20 '13 at 05:08
Obviously it will, that's why I wrote there :) – Mr. Alien Dec 20 '13 at 05:13

score 0 · Answer 2 · answered Dec 20 '13 at 04:58

0

Add:

ul.horizontal-content {
    overflow: auto;
}

answered Dec 20 '13 at 04:58

Astockwell

1,498
13
11

That's really close to what I want but I just want all four boxes to be wrapped in the container with the border. Do u know how to solve this? – Wananong Kluanwong Dec 20 '13 at 06:20

score 0 · Answer 3 · answered Dec 20 '13 at 04:59

0

here use overflow:auto and here is link of demo Click Here

answered Dec 20 '13 at 04:59

Gopal Joshi

2,350
22
49

score 0 · Answer 4 · answered Dec 20 '13 at 06:08

0

I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong

answered Dec 20 '13 at 06:08

Wananong Kluanwong

31
2

score 0 · Answer 5 · answered Dec 20 '13 at 06:31

0

Okay, all problems are solved with clear:both

answered Dec 20 '13 at 06:31

Wananong Kluanwong

31
2

li element won't properly wrap within its container

5 Answers5