Поместите дату и автора в одну строку и горизонтальную линию сразу после - YAML HEADER

Question

Я пытаюсь вставить горизонтальную линию (---) сразу после этого заголовка ниже, но строка помещается в неправильное положение, вторгаясь в область заголовка. Это началось, когда я добавил конфигурации float в css. Есть какие-нибудь предположения о том, что происходит?

---
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

Это проблема css с плавающим элементом.

Просто добавьте clearfix к содержащему его заголовку div, например:

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

(см. здесь подробнее)

ОБНОВЛЕНИЕ: по запросу OP, полный код будет

---
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>

---