PDA

View Full Version : div height set to auto apprearing different in browsers


dubaco
05-05-2009, 10:46 AM
Hi

Has anyone had this problem and solved it?

I have a div set to auto height within another div, also set to auto.

However in IE the page displays correctly by displaying the "parent" div just longer then the inner div but in FF and Google chrome, it doesn't display properly.
I have checked that the divs when opened are then closed again but as it's ok in one browser, why not in the others?

The page I am working on is my own website here:

http://www.woodendhouse.co.uk/booking/tariff.htm

Any suggestions gratefully received

many thanks

d

Corrosive
05-05-2009, 11:43 AM
Hi

Has anyone had this problem and solved it?

I have a div set to auto height within another div, also set to auto.

However in IE the page displays correctly by displaying the "parent" div just longer then the inner div but in FF and Google chrome, it doesn't display properly.
I have checked that the divs when opened are then closed again but as it's ok in one browser, why not in the others?

The page I am working on is my own website here:

http://www.woodendhouse.co.uk/booking/tariff.htm

Any suggestions gratefully received

many thanks

d

Have you tried adding a clear fix after your floated elements?

dubaco
05-05-2009, 01:26 PM
Have you tried adding a clear fix after your floated elements?

Hi T

Thanks for coming to my aid once again!

I have found a reference in an old forum thread at:

http://www.dreamweaverclub.com/forum/showthread.php?p=151216

and it's suggesting adding this css to my css file, which I've done

.cleafix {
overflow: hidden;
height: 1%;
}
it then says "add the class to the container div and it holds all the divs within it in place"

I'm being a bit dense here, sorry - is this all what you meant and how would I go about adding the class to the container (which I have called wrapper) please?

Many thanks

d

dubaco
05-05-2009, 01:36 PM
Hi corrosive again

fanbloodytastic

I found another method that made more sense

I added this to my css:

.clearfloat {
clear:both;
height:0;

font-size: 1px;
line-height: 0px;
}

and this to the parent div just before the end of the div:

<div class="clearfloat"></div>

I found it all here but wouldn't have if you hadn't given me the keyword to look for, so thanks

http://www.adobe.com/devnet/dreamweaver/articles/css_2c_tableless_03.html

Wish I'd known that ages ago!!

d

Corrosive
05-05-2009, 01:43 PM
Hi corrosive again

fanbloodytastic

I found another method that made more sense

I added this to my css:

.clearfloat {
clear:both;
height:0;

font-size: 1px;
line-height: 0px;
}

and this to the parent div just before the end of the div:

<div class="clearfloat"></div>

I found it all here but wouldn't have if you hadn't given me the keyword to look for, so thanks

http://www.adobe.com/devnet/dreamweaver/articles/css_2c_tableless_03.html

Wish I'd known that ages ago!!

d


Hi mate

Not sure why the line height or font size are in there but, if it works, then that's all that matters.

Glad you found the solution. Do you know why this works?

dubaco
05-05-2009, 01:47 PM
Hi mate

Not sure why the line height or font size are in there but, if it works, then that's all that matters.

Glad you found the solution. Do you know why this works?

Funny you should mention that, i was wondering that myself?

d

Corrosive
05-05-2009, 01:55 PM
Funny you should mention that, i was wondering that myself?

d

OK, floating elements such as the columns in a website structure takes them out of the natural 'flow' of the page. This means that the container or wrapper will 'spring' back up to the first unfloated element. The only way to make sure the wrapper surrounds the whole of the page is to put a clear fix in. This 'clears' both left and right floats. If you put a footer in the page and used clear: both; then it would have the same effect but, if you don't want a footer, you can use a hidden div which does the job for you and makes the wrapper stretch all the way down.

Make sense?

dubaco
05-05-2009, 02:05 PM
the container or wrapper will 'spring' back up to the first unfloated element.

Make sense?

That makes sense now! I had a lot of trouble last summer after you had kindly tutored me in the art of divs on that playsport site (if you remember that far back!

d

Corrosive
05-05-2009, 02:15 PM
That makes sense now! I had a lot of trouble last summer after you had kindly tutored me in the art of divs on that playsport site (if you remember that far back!

d

Yes, I certainly remember the site. I am still trying to find a window in my diary to come and blag a free Cumbrian weekend off you!

domedia
05-05-2009, 05:05 PM
Remember that the clear fix in this thread is old.
If you have floated element inside a container, just add height: 1%; overflow: hidden; to it. No more tags needed.

dubaco
05-05-2009, 10:37 PM
ok many thanks for that, I'll strip out the unwanted stuff

d