Have a `
` keep its height with floated children

Question

Possible Duplicate:
How to fit a div’s height to wrap around its floated children

I want to have a <ul> inside of a <div> with a bunch of floated <li>. Only problem is that the containing <div> collapses to be 0px tall. How do I make the <div> keep its height as if it contained the <li>?

HTML:

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
</div>

CSS:

div {
background: rgb(90, 90, 90);
}

ul {
color: red;
}

li {
float: left;
clear: none;
margin-right: 10px;
}

If using floats is old-fashioned and you know a better style, let me know!

MrCode · Accepted Answer · 2012-12-07T07:39:43.840

2

Option 1 (recommended): Give the div style overflow:hidden; which will correct its height.

Option 2: Alternatively add a clearer div to the end of your current div

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
   <div style="clear:both;"> </div>
</div>

jsFiddle Demo

Edit: To clarify, both of the above have complete cross browser support and require no hacks or invalid CSS.

edited Dec 07 '12 at 07:39

answered Dec 07 '12 at 07:10

MrCode

63,975
10
90
112

Rohit Azad Malik · Answer 2 · 2012-12-07T07:22:30.467

2

Try Display:inline-block;

li {
display:inline-block;
    margin-right: 10px;
}

Demo

Cross Browser Inline-Block

edited Dec 07 '12 at 07:22

answered Dec 07 '12 at 07:10

Rohit Azad Malik

31,410
17
69
97

yeah, use display: inline-block instead of float. If you want to use float then you have to set a height to the div. – LazerSharks Dec 07 '12 at 07:13
1

`inline-block` isn't supported by IE7 or earlier. – MrCode Dec 07 '12 at 07:14
for ie7 used to display:inline – Rohit Azad Malik Dec 07 '12 at 07:15
My bad, it is *display: inline; and *vertical-align: auto;... there's a reason I use Compass. – greg5green Dec 07 '12 at 07:20
@MrCode cross browser display inline-block more info http://css-tricks.com/snippets/css/cross-browser-inline-block/ – Rohit Azad Malik Dec 07 '12 at 07:21
1

@RohitAzad that uses nasty IE hacks (which is invalid CSS). The fact is `inline-block` is not supported by IE7 or earlier so this is not a viable solution IMO when there is a simple cross browser solution without hacks. – MrCode Dec 07 '12 at 07:23
You could use conditional classes on your html or body element... then it's just .lt-ie8 .class { display: inline; vertical-align:auto; } – greg5green Dec 07 '12 at 07:25
I know it is good practice to implement cross-browser compatibility, but I wish us web developers would help Microsoft push IE7 and older to be obsolete by ignoring IE7 altogether. In my funny opinion – LazerSharks Dec 07 '12 at 07:29
MrCode, your "simple cross-browser solution without hacks" gives you non-semantic code. Which is going to cause bigger issues in the future? A little hack in your CSS (which will continually evolve over the years) or something that's stuck in your HTML until you get rid of it (which could be an issue if you keep building on with that stuck in there). – greg5green Dec 07 '12 at 07:30
@RohitAzad looks good - do you know how to get rid of the default space left between
elements?

Don P

Dec 07 '12 at 07:33

@DonnyP, check the articles I linked in my post. The first one mentions that the default space between inline-block elements is generally .25em. – greg5green Dec 07 '12 at 07:34

greg5green · Answer 3 · 2012-12-07T07:26:53.970

To fix your exact problem:

div {
    background: rgb(90, 90, 90);
    overflow: auto;
}

Maybe a less "old-fashioned" method:

div {
    background: rgb(90, 90, 90);
}
ul {
    color: red;
}
li {
    display: inline-block;
    *vertical-align : auto;
    *display: inline; // targets IE7 and such, same effect
    margin-right: 10px;
}

You will need to adjust your margin-right on the li element to match your exact specs. It's still cool to use floats, but why bother when display: inline-block will solve most of what you want???

PS: Sometimes IE hacks are ok -- I suggest using a preprocessor like Sass with a library like Compass to help you manage them.

A couple articles on the issue:

score 0 · Answer 4 · answered Dec 07 '12 at 07:32

Whenever you are using FLOAT property don't forgot to add clear property also

you can try this

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
      <li style="clear:both;float:none"></li>    <!-- Added Clear, removed float -->       
   </ul>
</div>

Have a `` keep its height with floated children

4 Answers4

Have a `
` keep its height with floated children