Positioning using float and margins

HTML-CSS
1

Hi, I’m trying to position some boxes so that:

  1. Box2 is at right margin 0, top margin 0 and stays in place when scrolling
  2. Content (which is currently hidden under Box1), and the text inside it floats to the right of Box1

36

From reading, float should work to stop the overlap but doesn’t behave as I’d expect? And Box2’s margins aren’t being applied.

2

You don’t need to float the content. Also, if box2 is fixed you and you give right: 0 like you are it will not be under box1 and the content.

https://codepen.io/anon/pen/gNYpGM

3

Thanks, since posting I’ve come up with this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Boxes</title>
    <style>
      .main {
        width: 300px;
        margin: auto;
        display: block;
      }

      .box1 {
        background-color: lightblue;
        float: left;
        width: 100px;
        height: 75px;
        margin-left: 0;
        position: relative;
        display: flex;
      }

      .box2 {
        background-color: lightgreen;
        margin-top: 0;
        float: right;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="box1">Box1</div>
      <div class="content">
        Content ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ...
      </div>
      <div class="box2">Box2</div>
    </div>
  </body>
</html>

which works:
05

Just trying to work out how and why it differs from yours.

4

Why are you floating box2 to the right?

5

I just have to, it’s in the spec

6

Remove the right property from box2 otherwise, you are positioning it to the right.

7

No, it’s correct, it’s supposed to be there.
Thanks for your help

8

Not if the initial layout you show in the first post is how it is supposed to be. box2 is clearly left aligned. I would need more information about the layout and the specs otherwise I can’t know what you are trying to do.

9

The initial layout was the current state of it, not the desired outcome. Sorry if that was unclear.

10

So you have what you need now, and you are just asking why my page layout is different?

Your layout is different from mine because of the float and positioning you have on box2. BTW floating the box right and also positioning it right does not really make much sense to me. At least not without some more context of the full page.

11

Yeah, you are right - thanks