Mixing floating and fixed positioning

54,333

Solution 1

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.

Solution 2

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>

Solution 3

You can also only add:

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

and set:

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

for correct layout.

JSFiddle

54,333

Pragmateek

My blog: Pragmateek I started programming at the age of 2, built my first computer at 3, invented C++ metaprogramming at 5, graduated from MIT at 9, got my third PHD from Harvard at 11 1/2, run my first startup at 12, declined Fields Medal at 13. My favorite programming language is Malbolge. In my spare time I enjoy playing hydrocrystalophone and theremin, and fixing bugs in the Linux kernel. I'm the man behind the "Jon Skeet" bot. And I'm currently cured for serious mythomania.

Updated on April 22, 2020

Comments

Pragmateek almost 4 years

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.

Pragmateek about 13 years

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.
Pragmateek about 13 years

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.
Pragmateek about 13 years

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.
harpo about 13 years

@Serious, glad to help. I've given up on IE altogether, and am so much happier.