HTML Elements not displaying accordingly. Why is this happening?

Question

Why is it displaying like that?

body {
  margin: 0 200px;
}

h1 { font-size: 16px; }

<h1>hi</h1>
<h1 style="float: left">hello</h1>
<h1 style="float: right">BYE</h1>
<h1>THIS IS A NEW LINE PLEASE</h1>

I just need it to display accordingly. This has never happened before. I dont have a clue

What is your expectation? It is unclear what you want to achieve. — connexo, Jun 24 '19 at 07:59
hello and bye will float left and right and anything on the bottom should just be normal — Parsa, Jun 24 '19 at 07:59

score 3 · Answer 1 · answered Jun 24 '19 at 08:00

3

I think you are looking for the clear property, which puts the element after any floated elements.

<div style="margin: 0 200px">
    <h1>hi</h1>
    <h1 style="float: left">hello</h1>
    <h1 style="float: right">BYE</h1>
    <h1 style="clear: both">THIS IS A NEW LINE PLEASE</h1>
</div>

answered Jun 24 '19 at 08:00

lonesomeday

233,373
50
316
318

thanks, really freaked out there for a second – Parsa Jun 24 '19 at 08:08

score 1 · Accepted Answer · answered Jun 24 '19 at 08:09

please try to avoid float. Flexbox has much smart way to handle this problem

.floatwrap {
  display: flex;
  flex-wrap: row;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="margin: 0 200px">
    <h1>hi</h1>
  <div class="floatwrap">
    <h1>hello</h1>
    <h1>BYE</h1>
  </div>

    <h1>THIS IS A NEW LINE PLEASE</h1>
</body>
</html>

yes just flex will slove your problem but if you want to maintain the alignment for left and right space between property will help you to align your text. play with it. i hope you will love flexbox :D — Irin, Jun 24 '19 at 08:22

HTML Elements not displaying accordingly. Why is this happening?

2 Answers2