CODEWITHSUNDEEP
htmlcss
jcubic
jcubic

Reputation: 66660

Float element that fit whole height

I need to create something like this:

enter image description here

And I created this html

<li>
  <strong>Version 2.0</strong>
  <span>Text</span> -
  <i>December 29, 2013</i>
</li>

But I can't make version to fit the whole height when it have float, I need to have float because version can have different size.

I've try to set height: 100%, position: relative and margin-bottom: auto also top:0; bottom: 0 but it only work with position: absolute but then it don't float.

Anybody know how can I make my html to be like on the screen?

Upvotes: 0

Views: 41

Answers (1)

George
George

Reputation: 36794

You should place your date inside your text container, because that will presumably always immediately follow your text.

You could display your elements as blocks and float your header to the left. If you then give your text overflow:hidden property, it will clear the floated element and take up any remaining space:

The margin and list-style-type are to look prettier

li{list-style-type:none}
li strong{display:block; float:left; margin-right:5px;}
li span{display:block; overflow:hidden;}

JSFiddle

Another way would be to display your list item as a table, and it's children elements as table-cells. You'd probably want to set a width for your strong element if you were going to choose this way:

li{display:table;}
li strong{display:table-cell; width:100px;}
li span{display:table-cell}

JSFiddle

Upvotes: 2

Related Questions