This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
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 Murach's Java Servlets and JSP this week in the Servlets 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: 60741
    
  65

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.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: DIV shrinks to fit its content
 
Similar Threads
Inheritance problem
shrinking a div vertically
Dynamic sizing text area using overflow:auto
HTML div tags - positioning
how to load HTML in DIV