I currently have:

<div style={{float:'left'}}>Left</div>
<div style={{float:'right'}}>Right</div>
<div>Below</div>

I was able to get Left and Right to be on the opposite ends like intended on the same line, but the Below is also affected, and floats to the left, right next to Left, even though float has not been defined for it.

So I was wondering how to keep Below on the next line, without being affected by the previous floats?

I currently have:

<div style={{float:'left'}}>Left</div>
<div style={{float:'right'}}>Right</div>
<div>Below</div>

I was able to get Left and Right to be on the opposite ends like intended on the same line, but the Below is also affected, and floats to the left, right next to Left, even though float has not been defined for it.

So I was wondering how to keep Below on the next line, without being affected by the previous floats?

• javascript
• html
• css
• reactjs

• Just a note: the situation is not actually react-specific, its mostly about HTML and would behave the same way in the browser regardless of how it was produced. – Ivan Kolmychek Commented Aug 17, 2016 at 20:55

2 Answers 2

You should clear the last div. Try this:

<div style={{clear:'both'}}>Below</div>

Have you tried clearing that last div?

clear: both