Question

I have a wrapper and I need to set it’s height equal in all browsers.

How do I do that?
Actually I have tried by using min-height and height:100% but it’s not working.

This is how it actually shows in different browsers:

Here is my CSS:

    body
{
    background: #99CCFF;
    margin: 20px 0;
    padding: 0;
    width: 100%;
}

    #wrapper
{
    position: relative;
    margin:-20px auto;
    width:auto;
    height:450px;
    background-image: url('../images/bg.jpg');
    background-repeat: repeat;
}       

Answer 1

@Kiran

You should get rid of your negative margin, first of all. If you see one browser has a layout issue, you can deal with that later using a conditional css statement in your header, and a separate css file.

But to answer your main question. make sure you always use margin:0; and padding:0; when doing initial layout. this will take away a lot of layout bugs in the very beginning. Some versions of IE don’t conform to web standards, so there isn’t much you can do sometimes, other than workarounds. (i.e. conditional css)

Have a look at this sample page a created for you.
I took away you position:relative, and added the float and display properties, as well as changed your margins and padding to zero on BOTH body and #wrapper. I also changed the width of your wrapper from auto, to 100%.

http://www.albatrossfonts.com/heightcss/wrapperHeight.html

I used white as a background color for the wrapper as well, since I don’t have access to your image.

Here’s the code:

body
{
    background: #99CCFF;
    margin: 0;
    padding: 0;
    width: 100%;
}

#wrapper
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 450px;
    display: block;
    float: left;
    background-image: url('../images/bg.jpg');
    background-repeat: repeat;
    background-color: #ffffff;
}