I am a little bit in doubt how I solve this the best way. In the footer of this page: Portfolio , there is the following:
04-11-2016 : Design In Portfolio
05-11-2016 : Hvad er Mautic?
06-11-2016 : Some text
I would like that the date is right aligned, but only the date. There I thought I could set it in a span? I tried with this html but that is of course not a solution:
HTML
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="footeritem">
<h4>Nyheder</h4>
<ul class="popular-posts">
<li>
<a href="#" target="_blank">
Design In Portfolio  <span class="newsDate">06-11-2016</span>
</a>
</li>
<li>
<a href="#" target="_blank">
Hvad er Mautic?    <span class="newsDate">06-11-2016</span>
</a>
</li>
<li>
<a href="#" target="_blank">
Some text   <span class="newsDate">06-11-2016</span>
</a>
</li>
</ul>
</div>
</div>
CSS
.newsDate {
font-weight: 100;
text-align: right;
}
You can try this:-
float:right;
Its contained inside a block element so add "float: right"
to those spans to get your right alignment =).
Edit. Someone shot down the float idea in a now deleted comment. Floating does present some layout ugliness for when your text on the left becomes too large. You could instead use a fancy flex solution that will hold up across different context a bit better.
For flex, set the anchor to "display: flex"
and the span to "flex: 1; text-align: right; white-space: nowrap;"
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With