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

Question

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>

score 6 · Accepted Answer · answered Jan 17 '17 at 15:46

6

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>

answered Jan 17 '17 at 15:46

j08691

204,283
31
260
272

1

Here is some useful documentation about positioning, you should take a look. http://www.barelyfitz.com/screencast/html-training/css/positioning/ – CMartins Jan 17 '17 at 15:50
This works. But can you please explain why using float doesn't make sense when using position : absolute ? – cookya Jan 17 '17 at 16:21
1

The second answer at http://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together sheds light on why – j08691 Jan 17 '17 at 16:23

score 1 · Answer 2 · answered Jan 17 '17 at 15:48

1

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>

answered Jan 17 '17 at 15:48

Johannes

64,305
18
73
130

1

Unfortunately with this solution the inner div is in the top-right corner and not in the bottom-right – cookya Jan 17 '17 at 16:04
1

in this case don't use float at all, but only absolute position. – Johannes Jan 17 '17 at 16:34

score 1 · Answer 3 · answered Jan 17 '17 at 16:01

1

you must remove "position: absolute"

answered Jan 17 '17 at 16:01

Marco

161
3
13

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

3 Answers3