CODEWITHSUNDEEP
css
cookya
cookya

Reputation: 3297

Why is float:right making the div float to the left?

I'm new to CSS. I'm trying to position a div (#inner) in the bottom-right corner of another div (#container). I wrote float: right; but when running the Html I see the inner div in the bottom-left corner of the container. Why is that? What's wrong with the code?

#container {
  position: relative;
  border: solid;
  width: 70%;
  height: 40%;
}
#inner {
  position: absolute;
  border: solid;
  bottom: 0;
  float: right;
  width: 30%;
  height: 30%;
}
<div id="container">
  <div id="inner">
    ABC
  </div>
</div>

Upvotes: 0

Views: 86

Answers (3)

Marco
Marco

Reputation: 161

you must remove "position: absolute"

Upvotes: 1

Johannes
Johannes

Reputation: 67748

Just remove the absolute position. Also, if you want the container to wrap the float/s, add "overflow: auto" to the container element:

#container {
  position: relative;
  border: solid;
  width: 70%;
  height: 40%;
  overflow: auto;
}
#inner {
  border: solid;
  bottom: 0;
  float: right;
  width: 30%;
  height: 30%;
}
<div id="container">
  <div id="inner">
    ABC
  </div>
</div>

Upvotes: 1

j08691
j08691

Reputation: 207901

Using float with absolute positioning doesn't really make sense. I think what you want is right:0 instead of float:right

#container {
  position: relative;
  border: solid;
  width: 70%;
  height: 40%;
  overflow: auto;
}
#inner {
  position: absolute;
  border: solid;
  bottom: 0;
  right:0;
  width: 30%;
  height: 30%;
}
body,
html {
  height: 100%;
}
<div id="container">
  <div id="inner">
    ABC
  </div>
</div>

Upvotes: 6

Related Questions