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?
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?
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
Code:
--------
| 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}
Reply With Quote
To my knowledge, there is nothing more you can do. ** 
Bookmarks