CODEWITHSUNDEEP
csscss-float
Adam Kiss
Adam Kiss

Reputation: 11859

Problem with CSS floated lists - one long item 'filling two rows'

On the enclosed screenshot is floated list with one item with long description, which pushes first item on next line one position to the right. I don't want that.

Is there some trick/css directive/layout, that will push the next line lower, so the line can be filled and all the items will be in one line?

I can generate clear: left; on every (n/3)+1-child, but I think there is some pure CSS solution, just can't seem to find it anywhere today.

I'm tired and somewhat slow today. Thank you.

Edit: I also obviously don't make sense today. This is what I want: The li with the photo of people sitting on the bench on the bottom should be right under the first one, but isn't, because the first item has too long text.

SCREENSHOT:

Screenshot

HTML:

<ul id="photos"> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Vianočný koncert - Zohor 2009
    <span class="nr">61</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Koleda 2009
    <span class="nr">1</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="Advent 2009" height="160" width="160"/><br> 
    Čejkovice 2009
    <span class="nr">15</span> 
  </a></li> 
<li> 
  <a href=".."> 
    <img src=".." alt="" height="160" width="160"/><br> 
    Marianka 2009
    <span class="nr">6</span> 
  </a></li> 
</ul>

CSS:

#photos li {
  display:block;
  float:left;
  position:relative;
}
#photos li a {
  text-decoration:none;
  display:block;
  padding:10px 10px 20px;
  cursor:pointer;
  width:160px;
  text-align:center;
}
#photos li a img {
  cursor:pointer;
  display:inline-block;
}

Upvotes: 1

Views: 363

Answers (1)

robertc
robertc

Reputation: 75707

Like Phrogz suggests, try inline-block instead of float. IE 6/7 doesn't support it directly, but you can fake it with a simple hack.

<style>
ul { list-style-type: none;}
li { display: inline-block;}
a { display: inline-block; width: 180px; padding:10px 10px 20px; text-decoration: none; text-align: center; }
</style>
<!--[if lt IE 8]>
<style>
li { zoom:1; *display:inline;}
</style>
<![endif]-->

It doesn't use the same markup as you have but here's an example I did for a similar question.

Upvotes: 1

Related Questions