CSS - Floated <aside>要素インデントテキスト

Question

私は、テキストの中央揃えの列でレイアウトを作成しようとしています。右側に座っている列の右側に「添付」されている要素は除いています。

Demonstration codepen

ポジショニングは正常に動作しますが、中央の列内のテキストは、フロートの位置にインデントされます。あたかもフロートがないかのように振る舞いたい。

現在のコード：

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; 
} 

すべてのヘルプは非常に感謝されます！

Answer 1

floatではこれができません。

HTMLレイアウトを再考するか、絶対配置を使用する必要があります。

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>

しかしあなたが見ることができるように絶対位置には欠点があります。それは非常に柔軟性がなく、あまり反応しません。 CSS

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

：あなたはこのような何かをしたい

Answer 2

、私は推測

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; 
} 

Answer 3

が、中央の列内のテキストは、フロートの位置にインデントされます。あたかもフロートがないかのように振る舞いたい。

あなたはleftにそれを位置付けているが浮かん要素同じ絶対値の負margin-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>