Put date and author in the same line and an horizontal line right after - YAML HEADER

Question

I am trying to insert a horizontal line (---) right after this header below, but the line is being placed in the wrong position, invading the header area. It began happening when I added float configs in the css. Any sugestions of what is happening?

---
title: "report"
author: "who cares"
date: "`r format(Sys.time(), '%d, %B, %Y')`"
output: html_notebook
---

<style type="text/css">

h1.title {
  font-size: 38px;
  color: DarkBlack;
  text-align: left;
}
h4.date { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: right;
}

h4.author { /* Header 4 - and the author and data headers use this too  */
    font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: left;
}
</style>

---

Answer 1

It's a css issue with the floating element.

Just add a clearfix to the containing header div like such:

<style>
  [...]
  div#header {
    overflow: auto;
  }
</style>

(see here for more details)

---

UPDATE:
as requested by OP, the full code would be

---
title: "report"
author: "who cares"
date: "`r format(Sys.time(), '%d, %B, %Y')`"
output: html_notebook
---

<style type="text/css">

h1.title {
  font-size: 38px;
  color: DarkBlack;
  text-align: left;
}

h4.date { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: right;
}

h4.author { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: left;
}

div#header {
  overflow: auto;
}
</style>

---