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

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 #cartelement with #fl