CSS-浮动 <aside> 元素缩进文本

Question

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 1

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.

One simple way to achieve that could be to give the floated element a negative margin-left of the same absolute value as you positioned it to the left :

 div { width: 400px; margin: auto; background: red; } aside { float: right; clear: right; width: 200px; left: 200px; margin-left: -200px; position: relative; background: yellow; } 

 <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. This paragraph should be centered in the middle of the page. This paragraph should be centered in the middle of the page. This paragraph should be centered in the middle of the page.</p> </div> 

Answer 2

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.

Answer 3

You want something like this, I guess:

https://codepen.io/bra1N/pen/RRdWRg

CSS:

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

aside {
  float: right;
  clear: right;
  width: 30%;
  position: relative;
  background: yellow;
}

p{
  margin: 0;
  width: 70%;
  float: left;
  background: red;
  text-align: center;
}