How can you use flexbox method to center div(second child) inside another div (parent), but not let it be affected by (first) child?

Question

In my case, flexbox method works very well for centering the navbar as the navbar has fixed positioning. What I don't want is the other div that's at the same level as the div I am having centered skew the div I want centered; I want it centered to the entire document, not just the area of the parent div that it is allowed.

body {
  margin:0;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  position: fixed;
  top: 0;
  width: 100%;
  font-family:'Smooch Sans';
  font-size:1.2em;
}

.navbar-item {
  float: left;
}

.navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 6px 13px;
  text-decoration: none;
  margin:0.5rem;
  border-radius:10px;
  transition: 0.4s;
}

.navbar a:hover:not(.active) {
  background-color: #111;
}
.navbar a.active:hover { background-color:#048f5c;
}
.active {
  background-color: #04AA6D;
}
div.navbar-options {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
div#navbar-left-title {
  color:white;
}

<!DOCTYPE html>
<html>
<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
  </style>
</head>
<body>

  <div class="navbar">
    <div id="navbar-left-title" style="width:fit-contents;float:left;">The Website Name</div>
    <div class="navbar-options">
      <div class="navbar-item"><a class="active" href="#home">Home</a></div>
      <div class="navbar-item"><a href="#news">News</a></div>
      <div class="navbar-item"><a href="#contact">Contact</a></div>
      <div class="navbar-item"><a href="#about">About</a></div>
    </div>
  </div>

  <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">

  </div>

</body>
</html>

this is all of the code. Sorry all the styling clogs it up. So I don't want the div#navbar-left-title to skew the div.navbar-options off the absolute center, in conclusion. Haven't been able to find any solution! link to the general idea off of tesla

score 0 · Accepted Answer · answered Apr 22 '22 at 02:28

A simple solution is to add position: absolute to #navbar-left-title as below.

body {
  margin: 0;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  position: fixed;
  top: 0;
  width: 100%;
  font-family: 'Smooch Sans';
  font-size: 1.2em;
}

.navbar-item {
  float: left;
}

.navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 6px 13px;
  text-decoration: none;
  margin: 0.5rem;
  border-radius: 10px;
  transition: 0.4s;
}

.navbar a:hover:not(.active) {
  background-color: #111;
}

.navbar a.active:hover {
  background-color: #048f5c;
}

.active {
  background-color: #04AA6D;
}

div.navbar-options {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#navbar-left-title {
  color: white;
  width: fit-contents;
  float: left;
  position: absolute;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
  </style>
</head>

<body>

  <div class="navbar">
    <div id="navbar-left-title">The Website Name</div>
    <div class="navbar-options">
      <div class="navbar-item"><a class="active" href="#home">Home</a></div>
      <div class="navbar-item"><a href="#news">News</a></div>
      <div class="navbar-item"><a href="#contact">Contact</a></div>
      <div class="navbar-item"><a href="#about">About</a></div>
    </div>
  </div>

  <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  </div>

</body>

</html>

A more complicated solution would be to set up a grid with three columns such as

<navbar>
  <div class="left">
    ...
  </div>
  <div class="center">
    ...
  </div>
  <div class="right">
    ...
  </div>
</navbar>

and set it up so that left and right have the same width always, so the center element can fill the remaining space.

Thank you very much! and for such a quick response. I think, for now, since I am newer to web development in general, I'll use the first method. But I'll reffer to the grid method too, if I'll need it in the future! — Josh Brown, Apr 22 '22 at 04:33

How can you use flexbox method to center div(second child) inside another div (parent), but not let it be affected by (first) child?

1 Answers1