Clearing floated li's

[maya90]

hi,

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>
</ul>

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…

[SamA74]

@maya90

is this correct syntax?

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.

@maya90

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

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

[PaulOB]

@maya90

so how do you clear floated li’s???

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

@maya90

I included the clear-div b/c the li’s are floated

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.

@maya90

(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…)

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

[PaulOB]

@SamA74

Apply the class to which ever element requires it, be that the ul or the last li.

Not if the lists are floated Sam:)

[maya90]

@SamA74

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

ok…;~))

thank you Sam…

[SamA74]

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

[PaulOB]

@SamA74

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.

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

[Jasmin_A]

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;
}

[PaulOB]

@Jasmin_A

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

Actually both those methods have already been discussed

[Jasmin_A]

@PaulOB

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.

Sorry, didn’t see this part.