Why when i put float:right on <div> it goes down?

Question

I want #cart to go to the right top of the page. When I add float, it goes down. Why? I'm putting there codes and images with and then without the float.

 * { margin: 0; } #fl { background-color: #fff; padding: 10px; color: transparent; font-size: 20px; height: 60px; margin-top: 100px; text-align: center; line-height: 60px; width: 70%; margin-left: auto; margin-right: auto; opacity: 0.8; border-left: 5px solid black; font-family: 'Nanum Gothic', sans-serif; } #log { height: 60px; margin-top: 2px; } #container { width: 70%; height: 70px; background-color: rgba(111, 250, 171, 0.5); box-shadow: 1px 1px 2px black; margin-top: 20px; display: flex; justify-content: center; margin-left: auto; margin-right: auto; flex-direction: row-reverse; } #cart { font-size: 30px; float: right; height: 40px; } 

 <div id="cart">CART</div> <div id="fl"> <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1> </div> <div id="container"> <div class="greensale"> <span class="more">400ml</span> for just <span class="more">200$</span> </div> <div id="log"> <img src="logo.png" height="60" width="60" /> </div> </div> 

Answer 1

When you make the element floating the next one ( id="fl" ) will become the first in-flow element and its top margin will collapse with the top margin of its the container ( body ). it's like you increased the top margin of the container by margin-top: 100px; and since the floating element is placed considering this one the element will jump to its new position.

To avoid this, you need to avoid margin to collapse :

 * { margin: 0; } body { padding-top:1px; } #fl { background-color: #fff; padding: 10px; color: transparent; font-size: 20px; height: 60px; margin-top: 100px; text-align: center; line-height: 60px; width: 70%; margin-left: auto; margin-right: auto; opacity: 0.8; border-left: 5px solid black; font-family: 'Nanum Gothic', sans-serif; } #log { height: 60px; margin-top: 2px; } #container { width: 70%; height: 70px; background-color: rgba(111, 250, 171, 0.5); box-shadow: 1px 1px 2px black; margin-top: 20px; display: flex; justify-content: center; margin-left: auto; margin-right: auto; flex-direction: row-reverse; } #cart { font-size: 30px; float: right; height: 40px; } 

 <div id="cart">CART</div> <div id="fl"> <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1> </div> <div id="container"> <div class="greensale"> <span class="more">400ml</span> for just <span class="more">200$</span> </div> </div> 

Adding background to the body will make you better see the issue. Comment/uncomment the floating property to see what is happening:

 * { margin: 0; } body { background:red; } html { background:#fff; } #fl { background-color: #fff; padding: 10px; color: transparent; font-size: 20px; height: 60px; margin-top: 100px; text-align: center; line-height: 60px; width: 70%; margin-left: auto; margin-right: auto; opacity: 0.8; border-left: 5px solid black; font-family: 'Nanum Gothic', sans-serif; } #log { height: 60px; margin-top: 2px; } #container { width: 70%; height: 70px; background-color: rgba(111, 250, 171, 0.5); box-shadow: 1px 1px 2px black; margin-top: 20px; display: flex; justify-content: center; margin-left: auto; margin-right: auto; flex-direction: row-reverse; } #cart { font-size: 30px; float: right; height: 40px; } 

 <div id="cart">CART</div> <div id="fl"> <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1> </div> <div id="container"> <div class="greensale"> <span class="more">400ml</span> for just <span class="more">200$</span> </div> </div> 

Answer 2

in your code #cart is top and right your page! so, you could use absolute position like:

#cart {
  font-size: 30px;
  right: 0;
  top:0;
  height: 40px;
  position:absolute;
}

Answer 3

instead of float: right do text-align: right . The float-style will align the #cart element with #fl