Ok, a while ago I thought 'position:absolute' meant an absolute position on the entire page. Then I read somwhere that the position was absolute but relative to what it was inside of. And when I read this and tested it, it worked. But i just used it on a site, and the position top:10px; right:20px;, is placing it at the complete top right corner...
Any ideas? Did I forget something that I overlooked last time?
PhilPlace your element inside another element that is relatively positioned.
example:
<div ... style="position: relative;>
<div ... style="position: absolute; top: 5px; left: 5px"></div>
</div>
Now, whenever the relative layer is, the absolute layer should be 5 from the top and left of that.
HavikExcellent, that worked perfectly. However, in another situation Im having difficulty placing some text. Works fine in IE, not in the others.
<div id="wnd">
<div id="menu">blahblah</div>
<div id="content">yadayada</div>
</div>
Ok, they both have, whatever they have... The menu is 200px wide, float:left, no margin. The content is variable width, also float:left.
Now, in IE the text stays inside 'wnd' and resizes and everything the way I want it. In mozilla, NN and other browsers, the text falls out of the 'wnd'.
When I specify a width to 'content', it goes back inside the 'wnd', but does not resize it at all. Because of float.
Are there any work arounds or anything that I may have missed?
Thanks again.Absolute positioning:
A block is absolutely positioned with respect to its first parent contained that is positioned.
example:
<body style="margin: 50px">
<div style="position: absolute..." id="div1">...
<div id="div2">...
<div style="position: absolute..." id="div3">...</div>
</div>
<div>
...
</body>
div1 does not contain any parent element that is positioned. Hence it will be positioned with reference to the viewport (i.e. your screen)
div2 will be displayed in its normal position
div3 is contained in div2. But div2 is not positioned. The first positioned parent for div3 is div1. hence div3 will be positioned absolute within div1, i.e. its position will be with reference to div1.Floating elements:
IE displays it incorrectly. A floated element should have width explicitly defined. If not, it takes width of its parent.
So your example will display as
--------
| Menu |
--------
--------------------
| Contents |
--------------------
If you want them to be displayed side-by-side, use
div#menu {width: 200px; float: left}
div#contents {/* Dont need anything here */}
Of course, you'll need some margin to make sure that contents dont run adjecant to menu. After the height of the menu is passed, the contents will wrap below the menu. To avoid that, you can use
div#contents{margin-left: 200px}While we are at it, you may want to read:
3 px IE bug:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->
** Curse bill gates
To my knowledge, there is nothing more you can do. **
Float model bug:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/floatmodel.html">http://www.positioniseverything.net/floatmodel.html</a><!-- m -->
** If you specify width to #contents, then float it. **Thanks, those will help.
Any ideas? Did I forget something that I overlooked last time?
PhilPlace your element inside another element that is relatively positioned.
example:
<div ... style="position: relative;>
<div ... style="position: absolute; top: 5px; left: 5px"></div>
</div>
Now, whenever the relative layer is, the absolute layer should be 5 from the top and left of that.
HavikExcellent, that worked perfectly. However, in another situation Im having difficulty placing some text. Works fine in IE, not in the others.
<div id="wnd">
<div id="menu">blahblah</div>
<div id="content">yadayada</div>
</div>
Ok, they both have, whatever they have... The menu is 200px wide, float:left, no margin. The content is variable width, also float:left.
Now, in IE the text stays inside 'wnd' and resizes and everything the way I want it. In mozilla, NN and other browsers, the text falls out of the 'wnd'.
When I specify a width to 'content', it goes back inside the 'wnd', but does not resize it at all. Because of float.
Are there any work arounds or anything that I may have missed?
Thanks again.Absolute positioning:
A block is absolutely positioned with respect to its first parent contained that is positioned.
example:
<body style="margin: 50px">
<div style="position: absolute..." id="div1">...
<div id="div2">...
<div style="position: absolute..." id="div3">...</div>
</div>
<div>
...
</body>
div1 does not contain any parent element that is positioned. Hence it will be positioned with reference to the viewport (i.e. your screen)
div2 will be displayed in its normal position
div3 is contained in div2. But div2 is not positioned. The first positioned parent for div3 is div1. hence div3 will be positioned absolute within div1, i.e. its position will be with reference to div1.Floating elements:
IE displays it incorrectly. A floated element should have width explicitly defined. If not, it takes width of its parent.
So your example will display as
--------
| Menu |
--------
--------------------
| Contents |
--------------------
If you want them to be displayed side-by-side, use
div#menu {width: 200px; float: left}
div#contents {/* Dont need anything here */}
Of course, you'll need some margin to make sure that contents dont run adjecant to menu. After the height of the menu is passed, the contents will wrap below the menu. To avoid that, you can use
div#contents{margin-left: 200px}While we are at it, you may want to read:
3 px IE bug:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->
** Curse bill gates
To my knowledge, there is nothing more you can do. ** Float model bug:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/floatmodel.html">http://www.positioniseverything.net/floatmodel.html</a><!-- m -->
** If you specify width to #contents, then float it. **Thanks, those will help.