Clash Royale CLAN TAG#URR8PPP

'Float' right a column when using display: table?

Im using display table for a 3 column section of my site. Im doing this as I need to vertically center the content of the first column.

How can I move the third column to the right while still keeping its text left aligned?

<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</span>
</span>

.cont
display: table;
border: 1px solid black;
width: 100%;

.one,
.two,
.three
display: table-cell;

.one
background: grey;
vertical-align: middle;

.two
background: green;



http://codepen.io/anon/pen/azbmrP

5 Answers
5

One simple solution is to use float: right to .three class and vertical-align: top to .two class:

float: right

.three

vertical-align: top

.two

.cont
display: table;
border: 1px solid black;
width: 100%;

.one,
.two,
.three
display: table-cell;

.one
background: grey;
vertical-align: middle;

.two
background: green;
vertical-align: top;

.three
float: right;


<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</span>
</span>

Use

.three

float:right;




http://codepen.io/anon/pen/raNMXr

DEMO

<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="set">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</div>
</span>
</span>

.set float:right;


Here is a solution:

.three > div


float: right;

and you can put a <br>tag after first div.

<br>

Link: http://jsfiddle.net/7081odd1/

.table display: table; margin-left: auto;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.