How do I group a h1 and list together?

Question

I'm trying to make a header menu that has horizontal list (a navigation area or menu) on the right and the h1 (name of the website) on the left (both using float tags to do so). I tried grouping the two together with header, nav, and div tag but nothing works. the h1 and ul tag act as if separate, not grouped. when i give the grouping tag (Div, header, nav) background color nothing happens, but when i give it a color: .... all the text inside does change color, so at least that works.

Please help me group h1 and ul together.

.header {
  width: 100%;
  background-color: aquamarine;
  color: red;
}

h1 {
  float: left;
}

ul {
  float: right;
  list-style: none;
  display: block;
}

ul li {
  display: inline-block;
}

<html>

<body>
  <header class="header">
    <h1>website name</h1>
    <ul>
      <li>Home</li>
      <li>contact</li>
    </ul>
  </header>
</body>

</html>

score 0 · Answer 1 · edited Apr 07 '20 at 06:11

Since you are using floats, you need to use something called clearfix hack. If not you can make them as display: inline-block

.header {
  width: 100%;
  background-color: aquamarine;
  color: red;
}

h1 {
  float: left;
}

ul {
  float: right;
  list-style: none;
  display: block;
}

ul li {
  display: inline-block;
}

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

<html>

<body>
  <header class="header clearfix">
    <h1>website name</h1>
    <ul>
      <li>Home</li>
      <li>contact</li>
    </ul>
  </header>
</body>

</html>

Roko C. Buljan · Answer 2 · 2020-04-07T06:15:37.557

As stated by MDN - CSS Float

As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element. Floats are removed from a parent context

Implies use of old-school CSS hacks like clearfixes in order to make a parent element "aware" of the containing floated elements.

Therefore to prevent the Float caveats, simply recur to a better yet simpler approach:

CSS Flex

display: flex;

.header {
  background-color: aquamarine;
  color: red;
  display: flex;
}

ul {
  list-style: none;
  display: flex;
  margin-left: auto;
}

li{
  padding: 1em;
}

<header class="header">
  <h1>website name</h1>
  <ul>
    <li>Home</li>
    <li>Contact</li>
  </ul>
</header>

Related: What is a clearfix?

score 0 · Answer 3 · answered Apr 07 '20 at 06:10

Using float is quite tidious job, Use Flexbox for making navbar.

.nav-wrapper
{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.list-wrapper
{
  width:50%;
  display:flex;
  justify-content: space-evenly;
  align-items:center;
}

<div class="nav-wrapper">
  <h1>Header</h1>
  <ul class="list-wrapper">
    <li>Home</li>
    <li>Contact</li>
    <li>About us</li>
  </ul>
</div>

How do I group a h1 and list together?

3 Answers3

CSS Flex