How to achieve "clear" for bottom of div, not just left and right

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 t开发者_开发知识库he "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?

Why not just put the two right containers in one?

<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
  <div class="row1">Link headline text</div>
  <div class="row2">other text</div>
</div>
<br class="clear" />

style:

.rank, .arrow, .content {
  float: left;
}
.clear {
  clear: left;
}

EDIT: Demo on jsfiddle

Solution 1

It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:

<li>
  <span class="num"></span>
  <span class="upvote"></span>
  <span class="main">main text</span>
  <span class="add">more text</span>
</li>

and

.add { clear: both; float: right; }

Solution 2

Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.

Anything better can be tailored to your needs, but we need to see HTML :)

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.

Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.

http://jsfiddle.net/userdude/H3qPt/

HTML

<div class="linkblock">
    <span class="score">100</span>
    <span class="arrow">^</span>
    <div class="linkdata">
        <div class="linkurl">Link headline</div>
        <div class="linktext">Other text</div>
    </div>
    <br/>
</div>

CSS

Some of this is just for demonstration.

.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
  float: left;
}
.linkblock br {
  clear: both;
}

div, span {
  border: 2px solid #ddd;
  margin: 4px;
  padding: 3px;
}
div.linkdata {
  border: none;
  padding: 0;
  margin: 0;
}

You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:

.vote {
  margin: 0 0 100%;
}

I haven't tested it, but it should work like a charm.

Caveat: Doesn't work well with responsive design :(

The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.