Firefox Height issue with CSS Div...

User 1903103 Photo


Registered User
29 posts

Thanks Eric & Tony, I believe I can tackle this last problem now. I've got all three columns floating and the ONLY issue is the height. I'm going to use your suggestion Tony and use a JavaScript. Found a few online and will implement, then I should be good to go.

Thanks for your help and patience!

~

Do... or do not. There is no try. Yoda
Nicole Fende
http://www.smallbusinessfinanceforum.com
Growing Tomorrow's Profits
User 562592 Photo


Registered User
2,038 posts

Tony the Tiger wrote:
This will give you what you want as far as sidebar height. Adjust accordingly for the content of each page.
<div id="left" style="height:1020px;">

<div id="right" style="height:1020px;">


The only problem with declaring the height is that all of your pages are forced to be that height regardless of the content. The best thing to do for your width issue is to use percentages. For example:

#left {width:25%;}
#middle{width: 50%}
#right {width: 25%}

Also, if you dont declare a width for your middle, then it should resize depending on screen size.

Also, make sure you % does not exceed 99.9%
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 184085 Photo


Ambassador
1,707 posts

Also remove the <p></p> after your </html> tag at the end of the page, it's invalid code in this location.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 562592 Photo


Registered User
2,038 posts

The auto height should solve your problem when you float. I wouldn't put any unnecessary code in your page if you don't have to.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 364143 Photo


Guest
5,410 posts

Eric, auto-height will not resolve the issue in this case. The sidebars will be as tall as the content and not the height of the center content.

If you read the thread, I advised him to do this using inline styles for each page. This will resolve the issue for him.
CoffeeCup... Yeah, they are the best!
User 562592 Photo


Registered User
2,038 posts

Tony the Tiger wrote:
Eric, auto-height will not resolve the issue in this case. The sidebars will be as tall as the content and not the height of the center content.

If you read the thread, I advised him to do this using inline styles for each page. This will resolve the issue for him.


Tom,

You are correct about the auto height; however, if he wants all three columns the same height with floated elements, then you want the height:100%, but only if the three columns are in a container. Its the container that the individual columns height is based off from.

The only reason I advise against the use of the inline example is because it sets his columns all the same height regardless of how much content he actually has on the page.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 364143 Photo


Guest
5,410 posts

OK, I see what you getting at. The floated divs will expand to 100% height of the parent container and not the browser window. The parent container height must be set for this to work.

Using inline styles to set the floated div height will not work anyway if the width of the container is not a fixed width. I rarely use percentage widths anyway, so an inline style for each page is no big deal. But you are right, this is not the most elegant way of accomplishing the task.
CoffeeCup... Yeah, they are the best!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.