Menu
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>
_
_
Is it possible to have a div that mixes the two behaviours :
_
Thanks in advance for your help.
963
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.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
