HTML CSS positioning

Question

 .container {width: 100%;} .nav h1 {float: left;} .nav ul {float: right;} .nav li {display: inline-block;}

 <div class="nav"> <div class="container"> <h1>.nav h1 Resume</h1> <ul> <li>.nav ul .nav li Home ul li</li> <li>Portfolio ul li</li> <li>Skills ul li</li> <li>Experience ul li</li> <li>Contact ul li</li> </ul> </div> </div> <div class="slider"> <h2>div.slider h2 Text Testingx</h2> <p>Web designer & Developement</p> <p>Read less DO more</p> <p>HTML</p> <p>css</p> <h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3> <p>Work with us to plan your digital marketing mix and achieve better results online.</p> </div>

this is clearly a different question. The first was asking how to remove the overlap. Here, I am asking why after giving a width of 100% to an element, it still allows other elements to enter its space; this was not even remotely approached on the last question

I do not wish for a solution but rather a detailed explanation, so I can understand what is happening for myself and be better educated to resolve issues for myself in the future; I'm just trying to learn the theory, this is not a live project as such.

I do not understand what is happening here. I am trying to create a navigational bar but my div class="slider" keeps imposing on my div class="nav" . In order to resolve this, I have created a container class for my " nav " elements, and give this 100% of the width. My understanding, was that by giving these elements 100% of the width there would be no 'free' space for anything else to enter. This is obviously not the case, would somebody be kind enough to explain why?

Answer 1

you have used float:left and float:right ....that's why the nav h1 and nav ul is out of document flow it mean other element will not consider them(as they don't exist). so the height of nav is 0 that's why the slider div is going up.

if you want solution read about css clear property

Answer 2

 .container {width: 100%;} .nav h1 {float: left;} .nav ul {float: right;} .nav li {display: inline-block;}

 <div class="nav"> <div class="container"> <h1>.nav h1 Resume</h1> <ul> <li>.nav ul .nav li Home ul li</li> <li>Portfolio ul li</li> <li>Skills ul li</li> <li>Experience ul li</li> <li>Contact ul li</li> </ul> </div> </div> <div class="slider"> <h2>div.slider h2 Text Testingx</h2> <p>Web designer & Developement</p> <p>Read less DO more</p> <p>HTML</p> <p>css</p> <h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3> <p>Work with us to plan your digital marketing mix and achieve better results online.</p> </div>