Flipflops.org – Web Development and bit of Art Rotating Header Image

cross browser min-height CSS

Always forgetting the usefull tips I find and use every other day. Despite now using http://del.icio.us I still have an ocean of bookmarks.

notes to self

400 px element that will expand with more content:

#content {
height: 400px;
height /**/:auto;
min-height: 400px;
}

Problem

  1. IE does not recognise a min-height but will use height and expand as needed.
  2. Firefox will not expand with height

Solution

  1. Reset height to auto in Firefox with a hack

2 Comments

  1. Flipflops says:

    This is the only CSS hack I use – and I use it almost everyday – and the thing is, I have some kind of mental blaock and just cannot remember the code.

  2. Flipflops says:

    I have been using this for ages. But recently ran into a whole bunch of problems on a site I was building at work: http://www.pea-pod.org – the trouble was in Firefox I couldn’t get the parent div background to go the length of the page.

    A quick Google Search and ta-da:
    http://orderedlist.com/articles/clearing-floats-the-fne-method

    It is such a simple solution it hurts – essentailly just float your parent element too.

Leave a Reply