How to reach & ldquo; Clear & rdquo; For the bottom of div, not just left and right

advertisements

I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:

The gray boxes highlight the four divs for each link listed.

The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.

I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.

Any ideas?


I'd go for a combination of the answers given by @Adam and @Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:

HTML:

<ol class="headlines">

  <li class="news-item">
    <div class="rank">9</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>

  <li class="news-item">
    <div class="rank">10</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>
</ol>

Style:

ol.headlines {
  display:block;
  list-style-type:none;
  list-style-position:outside;
  margin:0;
  padding:0;
}

div {
 border:1px solid #00F;
}

 ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
  float:left;
}

.news-item {
  clear:left;
}

ol.headlines h2,
ol.headlines .additional-content {
  display:block;
}

You can find a sample of this here: http://jsfiddle.net/DEWtA/

Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.