Why second div overlay first div?

Question

i'm new at designing web from scratch, i usually using bootstrap, but i wanna learn to design using just html & css.

And now i've a problem, i designing an admin page and i could not made the content part work.

i made two div, first for content header, second is for the content, but when i try to custom the second div, it's overlay the first div. And when i try to add a margin for the second div, the first div come down too. I don't know which is the problem of my code.

Here is my code

body {
 margin: 0px;
 padding: 0px;
 background-color: #ebe6e6;
}

* {
 box-sizing: border-box;
 font-family: "Roboto", sans-serif;
}

.main-content {
 padding-top: 50px;
}

.main-content {
  margin-left: 230px;
  margin-right: 20px;
  margin-top: 0px;
  padding-left: 20px;
  height: 95vh;
 }

 .main-content section {
  display: block;
 }

 .main-content .content-wrapper {
  min-height: 100%;
 }

 .main-content .content-header {
  padding: 10px 20px 10px 0px;
  float: left;
  position: relative;
  width: 100%;
  background-color: #fff;
  margin-bottom: 20px;
  z-index: 1;
 }
 .main-content .content-header .breadcrumb {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
  padding-left: 5px;
  margin: 0;
 }

 .main-content .content-header .breadcrumb li {
  display: inline-block;
 }

 .main-content .content-header .breadcrumb li:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 13px;
 }

 .main-content .content-header .breadcrumb li:nth-child(1):before {
  content: none;
 }

 .main-content .content-header .breadcrumb li a {
  text-decoration: none;
  padding: 10px;
  font-size: 13px;
 }

 .content-content {
  position: relative;
  z-index: 1;
 }

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4ee22917d4.js" crossorigin="anonymous"></script>
 
 <div class="main-content">
        <div class="content-wrapper">
            <div class="content-header">
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Dashboard</a>
                    </li>
                    <li>
                        <a href="#">Data</a>
                    </li>
                </ul>
            </div>
            <div class="content-content">
                <h1>TES</h1>
            </div>
        </div>
    </div>

Please include a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). — D. Pardal, Mar 31 '20 at 12:02
I don't see any issues with overlapping divs in fullscreen mode. — appledoes, Mar 31 '20 at 12:08
This is pretty hard to find the issue you are talking about, what is coming down when you add a margin and where are you adding the margin — ShrewdStyle, Mar 31 '20 at 12:08
@appledoes the .content-content is overlaying the content-header when i inspect it — Anang Hariyanto N, Mar 31 '20 at 12:13
@ShrewdStyle when i add a margin to the .content-content div, the content-header is coming down too — Anang Hariyanto N, Mar 31 '20 at 12:13
you need to clear float. Your element margin is collapsing with the parent margin because it's the first in-flow child since the first one is floating — Temani Afif, Mar 31 '20 at 12:17
just like what @TemaniAfif said the css that you need to fix this problem is clear:both — dhentris, Mar 31 '20 at 12:32

Why second div overlay first div?

0 Answers0