Reputation: 66660
I need to create something like this:
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
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;}
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}
Upvotes: 2