Clearing floated li's


is this correct syntax?

<ul id="sm">
	<li><a id="fb" href="#">share on Facebook</a></li>
	<li><a id="tw" href="#">share on Twitter</a></li>
	<li><a id="pt" href="#">share on Pinterest</a></li>
	<li><a id="ig" href="#">share on Instagram</a></li>
	<div class="clear"></div>

I included the clear-div b/c the li’s are floated… but the markup validator said that’s not correct…

it didn’t accept <span> either… so how do you clear floated li’s???

(I don’t want to use display:inline-block for the li’s b/c for some older versions of IE this doesn’t work… I figured floating li’s would be safer…)

thank you…

No. The only element that can be a direct descendant of ul is li.
But that does not mean you should create an empty li. Apply the class to which ever element requires it, be that the ul or the last li.

No one is using IE which is that old, let it go.


I believe you actually want to ‘contain’ them with in the ul rather than just clear them.

You can use the clearfix technique to contain the floats without extra markup or if you don’t need visible overflow apply overflow:hidden to the ul and the floats will be contained. You can also use display:table for the ul as long as you specify the width at 100% and that will contain floats also.

Actually inline-block will work back to ie5 if done right :slight_smile:


Not if the lists are floated Sam:)

1 Like


thank you Sam…

Of course, it’s going to be the following element that wants to clear.

No its the ul that needs to be contained otherwise the ul remains at zero height. If the ul has a background color then it will not show even if you clear the element after the ul and you can’t clear the last list item if they are all floated as that would break the layout. :slight_smile:

Clearing and containing are different concepts (which I know you know):wink:


I don’t know is this already solved with inline-block, but here is your desired solution:

#sm:after {
  display: table;
  content: "";
  clear: both

And remove that DIV from UL.

You can also use solution with overflow on parent element, but be sure to understand how overflow affects elements if height is set on parent.

#sm {
    overflow: hidden;

Actually both those methods have already been discussed :slight_smile:

Sorry, didn’t see this part.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.