Two Laptop Bag*
The moose likes HTML, CSS and JavaScript and the fly likes DIV shrinks to fit its content Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "DIV shrinks to fit its content" Watch "DIV shrinks to fit its content" New topic
Author

DIV shrinks to fit its content

accnit Jai
Ranch Hand

Joined: Feb 15, 2011
Posts: 33
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

What does this have to do with JSP?

Moved to the HTML/JavaScript forum.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Give it a fixed width or live with having a fluid layout.

Eric
accnit Jai
Ranch Hand

Joined: Feb 15, 2011
Posts: 33
I have given the width:auto now I tried to give fixed width, but no luck.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The code would be....

Eric
accnit Jai
Ranch Hand

Joined: Feb 15, 2011
Posts: 33
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
Ranch Hand

Joined: Apr 16, 2011
Posts: 47

Try using the min-width style on the DIV.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: DIV shrinks to fit its content