Cadel Watson Cadel Watson - 3 months ago 11
CSS Question

CSS - Floated <aside> element indents text

I'm trying to create a layout with a centered column of text, and aside elements which sit to the right and are "attached" to the right side of the column.

Demonstration codepen

The positioning works correctly, but the text in the center column is indented at the position of the float. I would like it to behave as if the float isn't there.

Current code:

HTML

<div>
<aside>This is an aside that should float to the right</aside>
<p>This paragraph should be centered in the middle of the page.</p>
</div>


CSS

div {
width: 400px;
margin: auto;
}

aside {
float: right;
clear: right;
width: 200px;
left: 200px;
position: relative;
}


Any help is very appreciated!

Answer

This is not possible with float.

You would need to eitehr rethink your HTML layout or use absolute positioning.

div {
  width: 400px;
  margin: auto;
  background: red;
  position: relative;
}
aside {
  width: 200px;
  left: 100%;
  position: relative;
  background: yellow;
  position: absolute;
}
<div>
  <aside>This is a footnote that should be aligned to the right</aside>
  <p>Assumenda animi asperiores ut corrupti veniam. Recusandae omnis pariatur est beatae. Consequatur voluptatem facere quaerat consectetur consequatur sequi quod dolor. Aspernatur aut et est. Quis assumenda labore nulla id fugit consequatur explicabo. Eaque
    aut nemo quia.</p>
</div>

However there are drawbacks to absolute positioning as you can see. It is quite inflexible and not greatly responsive.