H2 element is not on separate line

Question

I have a problem with CSS that I do not understand. The h2 tag is appended to the previous element, rather than being on a seporate line.

My code makes use of the CSS properties position, float and clear. Perhaps the problem is something to do with that?

I have tried to disabling various CSS styles in Chrome developer without luck.

Here is my minified code example:

div {
  width: 100px;
  float: left;
}
label {
  position: relative;
  left: 30px;
}
input[type="radio"] {
  position: absolute;
}

<section>
  <div>
    <input type="radio">
    <label>Radio #1</label>
  </div>
  <div>
    <input type="radio">
    <label>Radio #2</label>
  </div>
  <div>
    <input type="radio">
    <label>Radio #3</label>
  </div>
</section>
<h2>Heading</h2>

Why downvote? Can you explain? I did investigation, I provided source code and runnable sample to easily reproduce the trouble. — Leos Literak, Feb 08 '20 at 13:30
probably the parent container is the cause of this behavior, check them. — Rusty, Feb 08 '20 at 13:36
What do you see? I can see the same behaviour as in screenshot (chrome). — Leos Literak, Feb 08 '20 at 13:39
@LeosLiterak: the codepen example is incomplete. But there is probably `float: left` on `.sign-up-form__input` (add `clear: left` after) or nested `div`s (add `overflow: hidden` to `.sign-up-form__input`). — pavel, Feb 08 '20 at 13:42
I created this sample again and tested it in Chrome anonymous mode. I still can reproduce it, — Leos Literak, Feb 08 '20 at 14:01
Thank you panther. Clear worked. I will delete this downvoted question later .. — Leos Literak, Feb 08 '20 at 14:04
It could be caused by checkbox CSS: .atoms__checkbox { width: 9em; float: left; } — Leos Literak, Feb 08 '20 at 14:11
You are required to post a [mcve] here, within your question, and not a codepen. I am unable to reproduce your problem with the supplied code here. — Rob, Feb 08 '20 at 14:12

James Douglas · Answer 1 · 2020-02-08T15:31:03.993

1

Add clear: left; to the <h2> that you are having trouble with.

h2 {
  clear: left;
}
div {
  width: 100px;
  float: left;
}
label {
  position: relative;
  left: 30px;
}
input[type="radio"] {
  position: absolute;
}

<section>
  <div>
    <input type="radio">
    <label>Radio #1</label>
  </div>
  <div>
    <input type="radio">
    <label>Radio #2</label>
  </div>
  <div>
    <input type="radio">
    <label>Radio #3</label>
  </div>
</section>
<h2>Heading</h2>

edited Feb 08 '20 at 15:31

answered Feb 08 '20 at 14:05

James Douglas

3,328
2
22
43

Your solution works as well, upvoted. Thank you. – Leos Literak Feb 08 '20 at 14:16

score 1 · Accepted Answer · answered Feb 08 '20 at 14:10

You can add this

.sign-up-form__input {
  overflow: auto;
}

This will make sure that floated child elements are completely wrapped by the .sign-up-form__input element, and thereby also solve your problem since the h2 will be moved down below the preceding .sign-up-form__inputelement.

H2 element is not on separate line

2 Answers2