Elements in wrong DIV when inspecting element

Question

As you can see from the code below, the h4 and hr tag are supposed to be part of .settings_title but when inspecting .options, it highlights that the h4 and hr tag are part it (see image).

When putting margin/padding to the "options" div, it puts the margin/padding above the h4 and hr tag, when it suppose to be above the paragraph tag.

HTML:

                        <div class="settings_timer">
                            <div class="settings_title">
                                <h4>TIMER</h4>
                                <div>
                                    <hr>
                                </div>
                            </div>

                            <div class="options">
                                <p>Test</p>
                            </div>
                        </div>

CSS:

.settings h4 {
font-family: "Rubik", sans-serif;
font-size: 22px;
color: #36A2B0;
float: left;
margin-right: 15px;
}

.settings hr {
    color: #C4C4C4;
    float: left;
    width: 80%;
}

.settings .options {
    float: none;
}

Chris Happy · Accepted Answer · 2020-07-26T01:44:37.593

It is because of float: left.

Try display: inline-block instead or .settings_title { overflow: hidden }.

There is always the .clearfix, but that might be a little more complicated. Here's more information:

.settings_title {  overflow: hidden;  }

.settings h4 {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #36A2B0;
  float: left;
  margin-right: 15px;
}

.settings hr {
  color: #C4C4C4;
  float: left;
  width: 80%;
}

.settings .options {
  float: none;
}

<div class="settings">
  <div class="settings_timer">
    <div class="settings_title">
      <h4>TIMER</h4>
      <div>
        <hr>
      </div>
    </div>

    <div class="options">
      <p>Test</p>
    </div>
  </div>
  <div>

score 1 · Answer 2 · answered Jul 26 '20 at 01:58

There's a few different ways you can do this. I'm thinking you want that <hr> to be vertically aligned in the middle though? Like you could use an :after with border.

But to answer you're question:

Another way is adding clear: left, overflow: auto, and display: block to the container. It just depends on what you're wanting that <hr> to do.

This used to be called the clearfix hack for floats. You might find display: grid to be a better way of doing this, but again that's dependent on what you want that <hr> to do.

.settings_title {
  clear: left;
  overflow: auto;
  display: block;
}

.settings h4 {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #36A2B0;
  float: left;
  margin-right: 15px;
}

.settings hr {
    color: #C4C4C4;
    
    width: 80%;
}

.settings .options {
    float: none;
}

<div class="settings">
  <div class="settings_timer">
      <div class="settings_title">
          <h4>TIMER</h4>
          <div>
              <hr>
         </div>
      </div>

      <div class="options">
          <p>Test</p>
      </div>
  </div>
</div>

score -1 · Answer 3 · answered Jul 26 '20 at 01:38

-1

Try self closing the tag. Write it as <hr/>

answered Jul 26 '20 at 01:38

joshstrike

1,753
11
15

Is there much difference between `
` and `
` in HTML? – Chris Happy Jul 26 '20 at 01:45
OP wrote that the .options div was being literally included inside the .settings_title div. There's only one unclosed tag between those two. In XHTML strict the hr tag must be closed. I don't know what OP's doctype is. To me it sounded like the upper div didn't close. If so, changing the float may have visually fixed the problem but he still has an unclosed div tag because the hr didn't close. – joshstrike Jul 26 '20 at 02:58
1

@ChrisHappy if you were working with XHTML yes (as joshstrike said) but that doctype is deprecated (unless there's a modern use case that I haven't heard of). The only time I've seen it to matter now, is with HTML style guides. I know the linter I like to use will throw an error if single elements are not self closing. – Alex Jul 26 '20 at 03:07

Elements in wrong DIV when inspecting element

3 Answers3