All geek questions in one place

Overlapping div element in HTML5

I made 3 divs in the following codes. The first has a navigation element, the other has a section element.

If you run the above code, you will see the nav border and both sections. I doubt that the border of the 1st section remained; the element should be to the right of the border of the navigation bar. But since this does not exist (you can see it by running the code), this implies the div "a" and "b" overlap. Am i thinking right? And if I am right, why is CSS designed to overlap divs.

This actually contradicts the reason for introducing div into CSS.

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
}
<div class="a">
  <nav>
    <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a>
      </li>
      <li><a target="_blank" href="default.asp">CSS</a>
      </li>
      <li><a target="_blank" href="/html/default.asp">HTML</a>
      </li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a>
      </li>
    </ul>
  </nav>
</div>
<div class="b">
  <section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
<div class="c">
  <section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
      luctus vestibulum augue ut aliquet.</p>
  </section>
</div>
Run codeHide result
+4
source share
4 answers

. 3 , . , , 1px.

float nav :

  <div style="clear:both"></div>

. , .

<!DOCTYPE html>
<html>
<head>
<style>


nav {
    float: left;
    width: 200px;
border:1px solid black;
}

section {
    border: 1px solid red;
}
</style>
</head>
<body>


<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
  <div style="clear:both"></div>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
Hide result
+2

float . flex-box

   nav {
/* float: left; */
  height: 100%;
  width: 200px;
  border:1px solid black;
   }
   .container{
  display: flex;
  height: 100%;
   }

   section {
  border: 3px solid red;
   }
   nav ul{
 margin:0;
   }
<div class="container">
<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
</div>
  <div class= "c">
<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
  </section>
</div>
Hide result
0

.a . clearfix

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


<div class="a clearfix">
    //rest of code
0

div float , div div. . div "b".

, :

https://jsfiddle.net/53q6e9hz/

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
  display:block;
}
.b{
 width:calc(100% - 202px);
 float: left;
}
.row1{
  display:inline-block;
}
0

Source: https://habr.com/ru/post/1651518/

More articles:


All Articles