Mixing floating and fixed positioning

Asked 20/1, 2011 at 18:58 Answered 21/4, 2017 at 10:41

Solved css position positioning css-float fixed

here is a standard use of float and fixed :

<html>
<head>
    <style type="text/css">
        #bigDiv
        {
            background-color: red;
            height: 2000px;
            width: 100px;
            float: left;
        }
        #littleDiv
        {
            background-color: green;
            height: 400px;
            width: 200px;
            float: left;            
        }
        #littleDivFixed
        {
            background-color: blue;
            height: 100px;
            width: 200px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="bigDiv">
    </div>
    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>
</body>
</html>

the "littleDiv" div is on the right of the "bigDiv" div but does not follow the scrolling,
the "littleDivFixed" div, on the contrary, scrolls but is not well positioned relatively to the "bigDiv" div (it is always stuck at the left of the display).

Is it possible to have a div that mixes the two behaviours :

always on the right of the "bigDiv" div (at a constant distance of 10px),
always on the display (at a constant distance of 10px from the top) ?

Thanks in advance for your help.

Hydrophobic answered 20/1, 2011 at 18:58 Comment(0)

Can you change the structure of the markup?

I got the behavior you described (in Firefox 3.6) by making two changes:

Nest littleDivFixed inside of littleDiv

So instead of

    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>

you have

    <div id="littleDiv">
        <div id="littleDivFixed">
        </div>
    </div>

Add a margin to the fixed div

margin-left: 10px;

Setting margin instead of left lets you keep the "auto" left positioning, while still making relative adjustments.

Adlai answered 20/1, 2011 at 20:15 Comment(2)

thanks a lot for this amazing trick. It seems to work perfectly with Chrome, Firefox and Opera. Of course it fails with IE8/9 but it was expected. – Hydrophobic 20/1, 2011 at 23:44

@Serious, glad to help. I've given up on IE altogether, and am so much happier. – Adlai 21/1, 2011 at 0:22

Like this? Just add a left and top attribute to the fixed div

http://jsfiddle.net/t5bK9/

Ok, this works in Chrome and IE8 (make sure it's standards mode, not quirks), but for some reason not in jsFiddle. I'm not sure why, but it does what you want (I think). If you want to be sure it is always 10px right in case the divs get resized, you could add an onResize listener to bigDiv to re-call the positFix function.

<html>
    <head>
        <style>
            #bigDiv {
                border: 1px solid red;
                height: 2000px;
                width: 100px;
                float: left;
            }
            #littleDiv {
                border: 1px solid green;
                height: 400px;
                width: 200px;
                float: left;            
            }
            #littleDivFixed {
                border: 1px solid blue;
                height: 100px;
                width: 200px;
                top: 10px;
                position: fixed;
            }
        </style>
        <script type="text/javascript">
            function $(elem) {
                return document.getElementById(elem);
            }
            function positFix() {
                $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
        </div>
        <div id="littleDiv">
        </div>
        <div id="littleDivFixed">
        </div>
        <script type="text/javascript">
            positFix();
        </script>
    </body>
</html>

Ricercar answered 20/1, 2011 at 19:29 Comment(2)

thanks for considering the issue and illustrating the use of "jsFiddle" (didn't know this web-site). But I'd like the left to be relative to the "bigDiv" div, eg always 10px, and not to be absolute. – Hydrophobic 20/1, 2011 at 19:38

thanks; indeed with the JavaScript initialization the result is perfect but ... I can't use JavaScript and have to stick with html/css only. Moreover handling resize events make things a little less convenient. – Hydrophobic 20/1, 2011 at 23:22

You can also only add:

#littleDivFixed {
    ...
    top: 10px;
    left: 110px;
}

and set:

body {
  width: 310px;
  margin: 0;
}

for correct layout.

JSFiddle

Freddafreddi answered 21/4, 2017 at 10:41 Comment(0)

Recommended topics

Hot tags