relative positioning in Firefox

mackknife · June 10th, 2005, 04:17 PM

First, thanks for the great book, it has help me a great deal. You gave me a fix for the first problem I encountered and I'm hoping you will have some ideas for my lastest problem that I can't find an answer for.

I have a relatively positioned div and a couple of relatively positioned divs inside of the first, both floated right. The first div, as I understand things, should expand to encompass the other two and does just that in IE, but not Firefox. I have tried different height values(auto, 100%) but the only way it works is if I define a definite value (100px). This does not work as the contents of the two inner divs are based on user input from a database and may therefore their height depends on how much text the user inputs.

a quick sample code:

<style type='text/css' media='all'>
#content {
border: thin solid green;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
height: auto;
}
#p1 {
border: thin solid black;
position: relative;
float: right;
width: 600px;
}
#p2 {
border: thin solid yellow;
position: relative;
float: right;
width: 600px;
}
</style>

<body>
<div id='content'>
    <div id='p1'>
    test text here. test text here. test text here.
    test text here. test text here. test text here.
    </div>
    <div id='p2'>
    test text here. test text here. test text here.
    test text here. test text here. test text here.
    </div>
</div>

</body>
</html>

I kind of hope this is a bug in Firefox and I'm not just missing something obvious.
Thanks in advance

richard.york · June 10th, 2005, 04:31 PM

Oh, I see. The solution you're looking for is to apply an overflow value to the content <div>. It can be anything but the visible value, auto or hidden will be what you're looking for most likely. Scrollbars won't ever show up unless you set explicit width or height values on the content <div>, and there is overflow. So you want to avoid explicit width or height.

Firefox is actually correct here, because that's how floats work. They aren't supposed to affect the content width / height of other elements.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

mackknife · June 11th, 2005, 07:07 PM

Thanks, that is what I needed. I was misunderstanding the overflow property and was thinking it was only applying to elements that had a definite height value. Thanks for clearifing.

deepakbadiger · July 12th, 2007, 02:02 AM

thnx everyone. even i came across the same issue, my div tg would not render correctly with position:relative. i added a float:left attribute and it worked great.
thnx again.

deepak badiger