ifubad Posted September 17, 2008 Share Posted September 17, 2008 Here's a test page http://ifubad.awardspace.com/absolute.html There's a floated list within div.b (black), that DIV's position is set to absolute, the text automatically wraps according to the width of div.a (red), unless a large enough width was specified for div.b. But if DIV b position was set to relative instead, then it it will not wrap. How come absolute forces the container to fit within a positioned parent container, unless a width is specified, while relative does not? I tried using white-space:nowrap, doesn't work. Is there a way to force it not to wrap, if I cannot use a specified width? div.a { width: 100px; border: 1px solid red; position: relative; } div.b { border: 1px solid; position: absolute; left: 50px; } ul { list-style: none; padding: 0; margin: 0; } li { float: left; } </style> <body> <div class="a"> <div class="b"> <ul> <li>Link 1</li> <li>Link 2</li> </ul> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 17, 2008 Author Share Posted September 17, 2008 Trying to use a background image or using an <img> tag and setting opacity, and placing it behind a floated <ul> menu that's been centered to page using position relative. So far, the only way that I can think of, is to put the img container below the ul container, setting the ul container DIVs, some to relative and absolute, the relative container will collapse to allow the img tag to move up and behind the ul menu. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.