How to align an element to any direction without flex or grid

HTML & CSS
1

I used flex in this pen: https://codepen.io/Supersudo/pen/qBdeeBy

But is there a way to align an element with that hierarchy?

2

Why don’t you want to use flexbox for this? It has good support back to IE11.

You could use the display:table properties to much the same effect.

1 Like
3

Why don’t you want to use flexbox for this?

I don’t know, really. I feel like I rely too much on grid and flexbox.

You could use the display:table

I tried the table but it didn’t worked.

.box {
  width: 70%;
  display: table;
  
  i {
   text-align: right;
  }
 }
4

You don’t have the right structure there which is why I floated the element to the right.

You can’t just use what you feel like :slight_smile:

To use .box as a table element you would need to have two cells inside and then you’d set the inner elements to display:table-cell and then align the content in the second cell to the right. (i.e. Put an element around the word ‘chevron’)

I updated the codepen to add the extra element.

2 Likes
5

Hi Paul, There’s a typo in this rule

.box i,
.box b {
 display: table-cell;
 vertical-alig: middle;
}

I noticed when testing with a new line on the <b>

<div class="container">
 <a href="#" class="box">
  <b>Chevron<br>new line</b> <i class="fa fa-chevron-down"></i>
 </a>
</div>
2 Likes
6

Thanks Ray now updated properly with any luck :slight_smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.