调整网页浏览器大小时如何防止调整div大小？

Question

please help me to this code, how do i prevent the div resizing when i resizing the webpage.

any advice for this code sir/mam?

thanks in advance for the help. sorry for my bad english :D

 /** to prevent inputing numbers in textbox enter your mobile number */ function validate(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|\\./; if( !regex.test(key) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } }/** to prevent inputing numbers in textbox enter your mobile number END */ /** For Checkbox */ jQuery(document).ready(function() { jQuery("#accept").click(function(){ if(jQuery("#button").is(":enabled")) { jQuery("#button").prop("disabled",true); } else { jQuery("#button").prop("disabled",false); } });});/** For Checkbox End*/ 

 .plogo{ z-index:5; position:absolute; font-family: Georgia, serif; line-height: 1em; color: #ffffff; font-weight:bold; font-style:italic; font-size: 72px; text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2); } a {text-decoration: none;} nav { width: 100%; height: 80px; background: rgb(2,189,138); position:absolute; z-index:4; } ul li { font: 13px Verdana, 'Lucida Grande'; cursor: pointer; -webkit-transition: padding .05s linear; -moz-transition: padding .05s linear; -ms-transition: padding .05s linear; -o-transition: padding .05s linear; transition: padding .05s linear; font-weight:bold; } ul li.drop { position: relative; } ul > li { display: inline-block; } ul li a { color: #eee; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } ul li a:hover { color: #eee; } .dropOut .triangle { width: 0; height: 0; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; top: -8px; left: 50%; margin-left: -8px; } .dropdownContain { width: 160px; position: absolute; z-index: 2; left: 50%; margin-left: -80px; /* half of width */ top: -400px; } .dropOut { width: 160px; background: white; float: left; position: relative; margin-top: 0px; opacity: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); box-shadow: 0 1px 6px rgba(0,0,0,.15); -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } .dropOut ul { float: left; padding: 10px 0; } .dropOut ul li { text-align: left; float: left; width: 125px; padding: 12px 0 10px 15px; margin: 0px 10px; color: #777; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background .1s ease-out; -moz-transition: background .1s ease-out; -ms-transition: background .1s ease-out; -o-transition: background .1s ease-out; transition: background .1s ease-out; } .dropOut ul li:hover { background: #f6f6f6; } ul li:hover a { color: white; } ul li:hover .dropdownContain { top: 65px; } ul li:hover .underline { border-bottom-color: #777; } ul li:hover .dropOut { opacity: 1; margin-top: 8px; } .wrapper { background: #50a3a2; background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); position: absolute; top: 50%; left: 0; width: 100%; height: 100% auto; margin-top: -250px; overflow: visible; } .container { max-width: 600px; margin: 20px; padding: 80px 0; height: 100% auto; } .container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-put; transition-timing-function: ease-in-put; font-weight: 200; } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .bg-bubbles li:nth-child(1) { left: 10%; } .bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; } .bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; } .bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles li:nth-child(5) { left: 70%; } .bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } .bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; } .bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles li:nth-child(10) { left: 90%; width: 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } .cacc{ z-index: 2; position:relative; height:10px; width:280px; } input[type='text']{ font-size:18px; font-family:modern, tahoma; } /*---------- For username --------------------------------*/ input[type='text'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 10px 15px; display: block; font-size: 18px; color: #fff; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; background-color: white; color: #53e3a6; } /*---------- For username End--------------------------------*/ input[type='password'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 10px 15px; display: block; font-size: 18px; color: #fff; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; background-color: white; color: #53e3a6;} input[type='email'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 10px 15px; display: block; font-size: 18px; color: #fff; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; background-color: white; color: #53e3a6; } .dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; } .cbox{ position:relative; z-index:2;} .logbutton { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: #fff; border: 0; padding: 10px 15px; color: #53e3a6; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; position: relative; z-index: 2; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } .logbutton:hover { background-color: #f5f7f9; } 

 </head> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jssor.slider.mini.js"></script> <body style="background-color:#e8e8e8; margin:0px; padding:0px;"> <font class="plogo"> &nbspP . A . R . S</font> <nav> <ul>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <li><a href="#">Home</a></li> &nbsp&nbsp&nbsp <li><a href="plog.php">Log In</a></li> &nbsp&nbsp&nbsp <li><a href="cacc.php">Create Account</a></li> <li class="drop"> <a href="#" style=" line-height: 80px; padding: 0 20px; height: 80px;">Advertisement</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div> <ul> <li><a href="#" style="color:#777;">Job Hiring</a></li> <li><a href="#" style="color:#777;">Tourist Spot</a></li> <li><a href="#" style="color:#777;">Restaurant & Bar</a></li> <li><a href="#" style="color:#777;">Foods</a></li> <li><a href="#" style="color:#777;">Party Events</a></li> </ul> </div> </div> </li> <li><a href="#">About Us</a></li> </ul> </nav> <div class="wrapper"> <div class="container"> <center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1> <?php ?> <form action=""><font style="color:#fff; font-weight:bold; font-size:18px;"> Choose your Username <input type="text" class="cacc" placeholder="Create Username" /> Choose your Password <input type="text" class="cacc" placeholder="Create Password" /> Your Email <input type="email" class="cacc" placeholder="Enter your email" /> Your First Name <input type="text" class="cacc" placeholder="First name" /> Your Last Name <input type="text" class="cacc" placeholder="Last name" /> Your Mobie Number <input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" /> Your Birthday<br /> <select class="dlist"> <option>Month</option> <option>123</option> </select> <select class="dlist"> <option>Day</option> </select> <select class="dlist"> <option>Year</option> </select><br /> Your Gender<br /> <select class="dlist"> <option>Gender</option> <option>Male</option> <option>Female</option> </select><br /> <input type="checkbox" class="cbox" id="accept" required /> <br /> <input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" /> </font></form> </center></div> </body> 

please help me to this code, how do i prevent the div resizing when i resizing the webpage.

any advice for this code sir/mam?

thanks in advance for the help. sorry for my bad english :D

Answer 1

Add min-width CSS property to the element you want to not be resized to lower than prefered width:

.YOUR_DIV_CLASS {
    min-width: 500px; // Or any other width you prefer.
}

Or use width property and define width in px to make the div have static width.

Answer 2

changing each or some of those elements (depending on your needs)

... {
...
width: 100%;
...
}

into something like:

... {
...
width: 980px; (or whatever numeber you need)
...
}