Issues with using auto height in firefox

Vedder

Vedder

Vedder

Associate
Joined
18 Oct 2002
Posts
972
Location
Derby
Got a strange one here but it's probably a simpleton issue so I thought I would ask you.

I have done a layout for a site I am doing and I am having an issue when I am setting the length of the content. I room for a navigation column on the right of the layout and to the left is the content. As the navigation is never going to be as long as the content, and the content size will differ I have chosen both area's height as auto (which I have heard is the way you should always do this?). As my design as curved borders I wanted to do the same with my main content/article area. An example below is of a template page, which room for the navigation just how I want it in IE6/7:

layoutie7auto.jpg


However in Firefox it decides to make the div as small as the content inside it (which, as its the navigation wont be much anyway, and looks like this:)

layoutffauto.jpg


I can remedy this somewhat by setting a height attribute for both parts and get the following below in Firefox but this is in no way practical:

layoutie7.jpg


These elements both sit in an area of 774px wide. The navigation is called "ContentLeftArea" and the CSS is:

Code: 
#ContentLeftArea
{
   
    width:160px;
    height:auto;
    background-color:White;
    margin:0px;
    padding:0px;
    font-size:0pt;
    float:left;
}

The content area is called "ContentRightArea" and the CSS is:

Code: 
#ContentRightArea
{
   
    width:614px;
    height:auto;
    background-color:White;
    font-size:0pt;
    margin:0px;
    padding:0px;
    float:right;
}

Its normally dead simple with me but any help on his appreciated.
 
I may have misunderstood this but couldn't you use min-height?

Also, didn't you use to post on Q3W?
 
In other words, you have two columns that you want to have equal height on.. but without setting an absolute height.

You could probably do it with javascript but 99% of designers just use a technique called 'faux columns'.
http://www.alistapart.com/articles/fauxcolumns/

If you do end up using 'faux columns', you should also read up on 'clearfix'. You'll need it.
http://www.positioniseverything.net/easyclearing.html

1. Put your two floated divs in a parent div. Give the background to the parent div.
2. Apply clearfix to the parent div so it contains the two floated divs.
3. Done. Easy as.


Edit: PS, default value for height is 'auto' anyway so you don't need to declare it. Nor do you have to reset the margin and padding on your divs as they won't have any to begin with. (unless you've declared so elsewhere)
 
Last edited:
Tripnologist said:
In other words, you have two columns that you want to have equal height on.. but without setting an absolute height.

You could probably do it with javascript but 99% of designers just use a technique called 'faux columns'.
http://www.positioniseverything.net/easyclearing.html

If you do end up using 'faux columns', you should also read up on 'clearfix'. You'll need it.
http://www.positioniseverything.net/easyclearing.html

1. Put your two floated divs in a parent div. Give the background to the parent div.
2. Apply clearfix to the parent div so it contains the two floated divs.
3. Done. Easy as.


Edit: PS, default value for height is 'auto' anyway so you don't need to declare it. Nor do you have to reset the margin and padding on your divs as they won't have any to begin with. (unless you've declared so elsewhere)
Click to expand...

That is pretty much the nail on the head I think. I shall try in a short while. Thanks for the links.
 
You must log in or register to reply here.
Back
Top Bottom