Why one div effecting the other div?

Question

I am not sure why "element one" is not centered. The div with class name "navBar" is effecting the text in the div below. I'm not sure why "element one" is not centered. When i remove the "navBar" div it is fixed so I know it is because of that. Also, when I remove some of attributes like float:right, "element one" will change positions, but will not stay centered.

Thanks!

html,
        body {
            height: 100%;
            background-color: #231C18;
            font-family: 'Cabin', sans-serif;
        }
        
        body {
            margin: 0;
        }
        
        .flex-container {
            padding: 0;
            margin: 0;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }
        
        .navBar {
            height: 50px;
            line-height: 50px;
        }
        
        .bar {
            margin: 10px;
            color: white;
            text-decoration: none;
        }
        
        .title {
            float: left;
            font-size: 40px;
        }
        
        .right {
            float: right;
        }
        
        .balance {
            background-color: #1A1411;
            border-radius: 5px;
            text-align: center;
        }
        
        .bottom {
            text-decoration: none;
            margin: 10px;
            color: #F7F7F7;
        }
        
        .flex-item {
            background-color: #1A1411;
            padding: 5px;
            width: 90vw;
            max-width: 700px;
            height: 40px;
            margin: 10px;
            color: white;
            font-weight: bold;
            font-size: 2em;
            text-align: center;
            border-radius: 5px;
        }
        
        .ad {
            height: 300px;
        }

<div class="flex-container">

        <div class="row">

            <div class="navBar">
                <a class="bar title" href="#">title</a>
                <a class="bar right" href="#">three</a>
                <a class="bar right" href="#">two</a>
                <a class="bar right" href="#">one</a>
                <a class="bar right balance" href="#">balance</a>
            </div>
            <div class="flex-item">element one</div>
            <div class="flex-item ad">element two</div>

            <div>
                <a class="bottom" href="#">placeholder</a>
            </div>
        </div>
    </div>

score 1 · Accepted Answer · answered Jun 15 '18 at 03:00

Add clear:both style to flex-item

html,
        body {
            height: 100%;
            background-color: #231C18;
            font-family: 'Cabin', sans-serif;
        }
        
        body {
            margin: 0;
        }
        
        .flex-container {
            padding: 0;
            margin: 0;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }
        
        .navBar {
            height: 50px;
            line-height: 50px;
            
        }
        
        .bar {
            margin: 10px;
            color: white;
            text-decoration: none;
        }
        
        .title {
            float: left;
            font-size: 40px;
        }
        
        .right {
            float: right;
        }
        
        .balance {
            background-color: #1A1411;
            border-radius: 5px;
            text-align: center;
        }
        
        .bottom {
            text-decoration: none;
            margin: 10px;
            color: #F7F7F7;
        }
        
        .flex-item {
            background-color: #1A1411;
            clear: both;
            padding: 5px;
            width: 90vw;
            max-width: 700px;
            height: 40px;
            margin: 10px;
            color: white;
            font-weight: bold;
            font-size: 2em;
            text-align: center;
            border-radius: 5px;
        }
        
        .ad {
            height: 300px;
        }

<div class="flex-container">

        <div class="row">

            <div class="navBar">
                <a class="bar title" href="#">title</a>
                <a class="bar right" href="#">three</a>
                <a class="bar right" href="#">two</a>
                <a class="bar right" href="#">one</a>
                <a class="bar right balance" href="#">balance</a>
            </div>
            <div class="flex-item">element one</div>
            <div class="flex-item ad">element two</div>

            <div>
                <a class="bottom" href="#">placeholder</a>
            </div>
        </div>
    </div>

Nandita Sharma · Answer 2 · 2018-06-15T03:13:11.660

You were not using flex properly. See the below snippet for correct implementation of it. Flex works on direct children of the flex container. And not the grand children of it.

html,
body {
  height: 100%;
  background-color: #231C18;
  font-family: 'Cabin', sans-serif;
}

body {
  margin: 0;
}

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
}

.row {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.navBar {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
}

.bar {
  margin: 10px;
  color: white;
  text-decoration: none;
}

.title {
  margin-right: auto;
  font-size: 40px;
}

.balance {
  background-color: #1A1411;
  border-radius: 5px;
  text-align: center;
}

.bottom {
  text-decoration: none;
  margin: 10px;
  color: #F7F7F7;
}

.flex-item {
  background-color: #1A1411;
  padding: 5px;
  width: 90vw;
  max-width: 700px;
  height: 40px;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border-radius: 5px;
}

.ad {
  height: 300px;
}

<div class="flex-container">
  <div class="row">
    <div class="navBar">
      <a class="bar title" href="#">title</a>
      <a class="bar right balance" href="#">balance</a>
      <a class="bar right" href="#">three</a>
      <a class="bar right" href="#">two</a>
      <a class="bar right" href="#">one</a>
      
    </div>
    <div>
      <div class="flex-item">element one</div>
      <div class="flex-item ad">element two</div>
    </div>
    <div>
      <a class="bottom" href="#">placeholder</a>
    </div>
  </div>
</div>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

2 simple errors...

1.

Rather than putting <div class="flex-item ad>...
Put <div class="flex-item_ad>...
Just because having a class with a space in it could screw with the CSS...

Then once that's done change it from
.ad { styles blah blah }
to
.flex-item_ad { styles blah blah}

Just double check that you Have text-align: center; in your CSS for BOTH classes

2.

You have padding: 5px; on flex-item which creates space inside the div... If you still want the 5px padding just do this -

<div class="flex-item">
    <div class="flex-item_content">
    </div>
    <div class="flex-item_ad">
...

.flex-item {
  background-color: #1A1411;
  padding: 0px;
  width: 90vw;
  max-width: 700px;
  height: 40px;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border-radius: 5px;
}
.flex-item_content {
  padding: 5px;
}

Ya welcome :D

Why one div effecting the other div?

3 Answers3

1.

2.