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

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

css


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cSharp

Related Questions