DIV shrinks to fit its content

[accnit Jai]

In my JSP I have two DIV, one to display the content and other for footer which will have the buttons. Problem I am facing is, When i shrink my browser both DIV content also shrinks and it looks ugly. Can some one please tell me how i can stop DIV to shrink when anyone shrink the browser height or width. Hope I am making sense to every one.

[Bear Bibeault]

What does this have to do with JSP?

Moved to the HTML/JavaScript forum.

[Eric Pascarello]

Give it a fixed width or live with having a fluid layout.

Eric

[accnit Jai]

I have given the width:auto now I tried to give fixed width, but no luck.

[Eric Pascarello]

The code would be....

Eric

[accnit Jai]

here is the css code
body,html {
font-family: "Trebuchet MS", Georgia, Verdana, serif;
text-align: center;
margin: 0;
}

#content {
background-color: gray;
bottom: 80px;
overflow: auto;
position: absolute;
top: 0px;
width: 100%;
}

#footerwrap {
position: fixed;
bottom: 0px;
height: 80px;
background-image: url('../images/footer_background.png');
background-repeat: repeat-x;
float: right;
width: 100%;
overflow: auto;
}

#popup {
width: 67px;
height: 60px;
background-image: url('../images/docNavImg.png');
background-repeat: no-repeat;
bottom: 10px;
left: 0px;
margin-top: 10px;
position: absolute;
cursor: pointer;
}

#zoom {
position: absolute;
width: 67px;
height: 60px;
margin-left: 80px;
background-image: url('../images/device_nav_button_zoom.png');
background-repeat: no-repeat;
bottom: 10px;
margin-top: 10px;
position: absolute;
cursor: pointer;
}

.previouspage {
margin-top: 10px;
margin-left: 160px;
background-image: url('../images/button_prev_page.png');
height: 60px;
width: 105px;
background-repeat: no-repeat;
bottom: 10px;
position: absolute;
cursor: pointer;
}

.nextpage {
width: 105px;
height: 60px;
background-image: url('../images/button_next_page.png');
background-repeat: no-repeat;
bottom: 10px;
margin-top: 10px;
position: absolute;
right: 0px;
cursor: pointer;
}

Here is my JSP code:

<div id="content" align="center" >
<img src="../images/doc_4.png" width="60%" id="docs" align="middle" />
</div>

<!--Footer Start-->
<div id="footerwrap">

<div id="popup" ></div>
<div id="zoom" ></div>
<div class="previouspage"></div>
<div class="nextpage" id="next"></div>

</div>

[Ronald Castillo]

Try using the min-width style on the DIV.