Mixing floating and fixed positioning
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.
Answer
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.