Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 10th, 2005, 05:17 PM
Registered User
 
Join Date: May 2005
Location: , TN, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default relative positioning in Firefox

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

  #2 (permalink)  
Old June 10th, 2005, 05:31 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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
  #3 (permalink)  
Old June 11th, 2005, 08:07 PM
Registered User
 
Join Date: May 2005
Location: , TN, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

  #4 (permalink)  
Old July 12th, 2007, 03:02 AM
Registered User
 
Join Date: Jul 2007
Location: bangalore, karnataka, India.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to deepakbadiger Send a message via MSN to deepakbadiger
Default

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
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
chapter 11 figure 11-7 relative positioning pelopito BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 November 29th, 2007 06:11 AM
positioning text + form element + firefox Adam H-W CSS Cascading Style Sheets 2 June 12th, 2007 04:18 AM
Positioning Problem in Firefox and Netscape echovue Javascript 3 April 13th, 2007 09:39 AM
Relative Control Positioning rodmcleay C# 2005 0 January 24th, 2007 12:25 AM
relative/absolute positioning whacked bigal CSS Cascading Style Sheets 3 August 4th, 2005 01:06 PM



All times are GMT -4. The time now is 04:12 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.