HR doesn't appear in proper place

Question

Trying to separate my header and navtab with a simple horizontal line. Nothing fancy.

Yet, it appears above the header for some reason. I know it has something to do with floating of twitter button and company logo. Before I did this the line appeared as it should. I'm stuck here.

.main_header {
  background: #d0d0d0
}

.company_logo {
  float: left;
  text-align: left;
  padding: 10px 0 10px 50px;
}

.twitter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

<header class="main_header">
  <div class="company_logo">
    <img src="images/logo.png" width="20%">
  </div>
  <div class="twitter">
    <a href="https://twitter.com/kali"></a>
  </div>
</header>


<hr>

<nav class="navbar">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="port.html">Portfo</a></li>
      <li><a href="ser.html">Servi</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

I fixed your code but there was a script tag in a random place, check if that's not what's wrong. — Phiter, Mar 01 '18 at 20:21
"HR at wrong place at wrong time" Welcome to corporate life! — Jean-François Corbett, Mar 02 '18 at 07:39

score 2 · Answer 1 · answered Mar 01 '18 at 20:23

You're right. Since the children of .main_header are floated, their parent has no height.
One solution is to clear the floats.

Below, I'm using group class and one of the clearfix methods.
For further reference, see What methods of ‘clearfix’ can I use?

.main_header {
  background: #d0d0d0
}

.company_logo {
  float: left;
  text-align: left;
  padding: 10px 0 10px 50px;
}

.twitter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.group::after {
  content: "";
  display: block;
  clear: both;
}

<header class="main_header group">
  <div class="company_logo">
    <img src="images/logo.png" width="20%">
  </div>
  <div class="twitter">
    <a href="https://twitter.com/kali"></a>
  </div>
</header>

<hr>

<nav class="navbar">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="port.html">Portfo</a></li>
      <li><a href="ser.html">Servi</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

score 1 · Accepted Answer · answered Mar 01 '18 at 20:30

1

Try :

hr{
  clear: both;
}

Should clear floating elements on either side.

answered Mar 01 '18 at 20:30

Chris

86
5

this one helped in certain way ;-) I have horizontal line back but it changed the background colour of the header above the line back to default white. – kalibvb Mar 01 '18 at 20:36

HR doesn't appear in proper place

2 Answers2