Why when i put float:right on
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>

Note: the `` tag does not use and does not need a closing slash and never has. — Rob, Nov 18 '18 at 13:21

Temani Afif · Accepted Answer · 2018-11-18T13:22:11.230

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>

score 0 · Answer 2 · answered Nov 18 '18 at 13:16

0

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;
}

answered Nov 18 '18 at 13:16

shaghayegh sheykholeslami

310
1
11

score 0 · Answer 3 · answered Nov 18 '18 at 13:17

0

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

answered Nov 18 '18 at 13:17

Maximilian Kaske

58
2
7

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

3 Answers3

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