Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

DIV shrinks to fit its content

 
accnit Jai
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65115
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What does this have to do with JSP?

Moved to the HTML/JavaScript forum.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Give it a fixed width or live with having a fluid layout.

Eric
 
accnit Jai
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have given the width:auto now I tried to give fixed width, but no luck.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The code would be....

Eric
 
accnit Jai
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 47
Java MySQL Database PHP
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try using the min-width style on the DIV.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic