Menu
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?
715
Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
You should clear the last div. Try this:
<div style={{clear:'both'}}>Below</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
