After searching for ways to prevent step down, I attempted to implement the solutions I discovered in my code. Unfortunately, none of them seemed to work. This could be due to the fact that my stepdown is vertical and involves elements nested inside other elements.
When I float the time classes to the left in my code, they end up looking like a staircase rather than all floating to the left. It's clear that something is missing, but I'm not exactly sure what or where it is.
<ul class="lias">
<li class="tablecell">
<div class="count" >
<img src="Cute-Ball-Go-icon.png" style="height:30px; width:30px ; margin:0px">
<img src="message.png" style="height:30px; width:30px ; margin:0px" >
</div>
<div class="count" >
<samp>
<h3><a href="http://www.facebook.com/wisam.okkeh">sho hl 6a2s ?</a></h3>
</samp>
</div>
<div class="time" >
<h3>2 day ago</h3>
</div>
</li>
...
...
The css code required:
.count { display:inline-block}
.time {float:right; display:inline-block;}
.tablecell{white-space:nowrap; border-top:3px solid gray;list-style:none;}
Here is the jsfiddle link for the code
How can I ensure all time elements are floated to the right?