Clearfix not working on responsive skeleton

Question

I use the responsive Skeleton framework (boilerplate) for my website (you can get it from here: http://www.getskeleton.com/).

I have <ul> list column with different height. To clear nested column, the CSS says that I need to put the .clearfix class to the parent element.

I already tried to put the class but it won't clear the nested columns. Since I am using <ul> list items and I cannot put or inside the <ul> element.

Is there any solution for this?

My html code:

    <ul class="container">
      <li class="one third columns alpha">a</li>
      <li class="one third columns">b</li>
      <li class="one third columns omega">c</li>
      <li class="two thirds columns alpha">d</li>
      <li class="one third columns omega">e</li>
    </ul>

In Skeleton CSS the first column has 500px height, then the (d) and (e) column it should be moved to the bottom / second row, or in other words I need to clear the nested columns.

I'm thinking to put another empty <li class="clear"></li> anytime I move to another row and it works but I'm looking for alternative solution. Something more proper than adding an empty <li>

Thank you.

You need to make a jsFiddle or something similar so we can better help you by seeing your code and figuring out what you are doing wrong. — sulfureous, Jul 26 '13 at 04:45
Like sulfureous said we need to see your code to help you better. — David Lee, Jul 26 '13 at 05:00
because I will make something like this: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/ (exactly same model but I need to keep the size in 960grid), my assumption is it will be easier to add a lot of items in the future. — Ela Yudhanira, Jul 26 '13 at 06:50

score 0 · Answer 1 · answered Jul 26 '13 at 04:46

0

Try adding style='clear:both;' into the tag instead of the class='clearfix'

Many times this is what classes called "clearfix" are simply doing in my experience (a common CSS practice). For some reason your code, perhaps, is not finding the class in the style sheet, so this is just a quick guess/fix.

answered Jul 26 '13 at 04:46

prograhammer

20,132
13
91
118

1

Clearfix in Skeleton and other frameworks such as Bootstrap are not just doing `clear: both`. They usually use pseudo selectors like `:before` or `:after` to insert an element to help the clearing process. – sulfureous Jul 26 '13 at 05:19
yes, you're right @sulfureous, its use ':before' and ':after', skeleton said : /* Use clearfix class on parent to clear nested columns,or wrap each row of columns in a '
' */ .. but since I cannot put the div inside ul list I put clearfix class inside parent (ul class="clearfix"). But it won't work.
– Ela Yudhanira Jul 26 '13 at 06:14
sorry @DavidGraham I didn't put my code before, I already put my code I hope my question is more clear now. Thank you for your guess..but that's not fix my problem :) – Ela Yudhanira Jul 26 '13 at 06:17

score 0 · Answer 2 · answered Jul 26 '13 at 07:03

I think that you can do this with nested <ul>'s if you really want to go this route with these elements.

Here's how that would look with Skeleton:

<ul>

  <li class="six columns alpha clearfix">
    <ul class="container">
      <li class="one third columns">a</li>
      <li class="one third columns">b</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

  <li class="six columns omega clearfix">
    <ul class="container">
      <li class="one third columns">c</li>
      <li class="one third columns">d</li>
      <li class="one third columns">e</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

</ul>

Let me know if I understood and tackled your problem correctly. As per the Skeleton lack of documentation says: You need to add .alpha class to the first nested row and .omega class to the second nested row and repeat.

You can see that the parent element <li class="six columns alpha clearfix"> element has .clearfix set and now we're using nested lists to put column A and B in one row and column C, D and E in the second row.

Yes, definitely it will work for the grid. But I already code the javascript for the "expanding-grid effect (like google image)" for **single `ul` list only**. I'm afraid I cannot implement this solution since it has different structure. I already try several solutions this recent days, it seems the only solution is adding empty `
Then you should consider upgrading your JS if you want to stay a bit cleaner with unnecessary markup. I changed the code a bit and made a fiddle with Skeleton of what I thought the problem was. http://jsfiddle.net/sulfureous/PncmX/ — sulfureous, Jul 26 '13 at 07:34

Clearfix not working on responsive skeleton

2 Answers2