user3047042
Reputation: 13
HTML-BROWSER ZOOM CAUSES ALIGNMENT PROBLEMS
I have 2 div elements with float left and float right withiin a div element..when i zoom the browser,all the alignment changes..the zooming should be like...how we zoom an image....can anyone give suggestions to resolve this problem
<html>
<style type="text/css">
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>
<div class="claro">
<div class="advancedDrugSearchOuterLayout">
<div class="advancedDrugSearchText">
<font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
</div>
<div class="textBelowAdvancedDrugSearchText">
<font size="3" ><i>THESE ARE DATABASE TEXT</a>
</div>
<div>
<div class="searchByText">
<font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
</div>
<div class="narrowByText">
<font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
</div>
</div>
<div class="searchByBlock">
<table border="1"">
<tr><td style="width:100px"></td>
<td><div style="float:right"><a href="#">Browse list of classes</div>
</td></tr>
</table>
<div>
<div style="float:left">
<font size="3">drugClass</font>
</div>
<div style="float:right">
<input id="selectDrugClasses">
</div>
</div>
<div>
<table>
<tr>
<td height="110"></td>
<td height="110"></td>
</tr>
</table>
</div>
<div>
<div style="float:left">
<font size="3">CLASS</font>
</div>
<div style="float:right">
<input id="selectIndications">
</div>
</div>
</div>
<div class="narrowByBlock">
<table><tr><td style="width:10px"></td>
<td> <div style="float:right"><input type="radio" checked="true">include
<input type="radio">exclude
</div>
</td>
</tr>
</table>
<div style="float:left">
<font size="3">CLINICAL</font>
</div>
<div style="float:right">
<input id="selectAdverseEffects">
</div>
<div>
<table>
<tr>
<td height="90"></td>
<td height="90"></td>
</tr>
</table>
</div>
<table border="1"><tr><td style="width:10px"></td>
<td><div style="float:right">
<input type="radio" checked="true">include
<input type="radio">exclude
</div></td></tr>
</table>
<div>
<div style="float:left">
<font size="3">Suggestion</font>
</div>
<div style="float:right">
<input id="selectDrugInteractions">
</div>
</div>
</div>
<div>
<div class="compareAndClearFields">
<input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()">
<a onClick="resetForm()">clearAllFields</a>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1
Views: 5358
Answers (2)
Oki Erie Rinaldi
Reputation: 1863
I just add a div that has a solid size.
Here's mine, and may be it's what you wonder :
<html>
<style type="text/css">
.allbody{
width : 1024px;
height: auto;
margin: 0px auto;
}
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>
<div class="allbody">
<div class="claro">
<div class="advancedDrugSearchOuterLayout">
<div class="advancedDrugSearchText">
<font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
</div>
<div class="textBelowAdvancedDrugSearchText">
<font size="3" ><i>THESE ARE DATABASE TEXT</a>
</div>
<div>
<div class="searchByText">
<font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
</div>
<div class="narrowByText">
<font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
</div>
</div>
<div class="searchByBlock">
<table border="1"">
<tr><td style="width:100px"></td>
<td><div style="float:right"><a href="#">Browse list of classes</div>
</td></tr>
</table>
<div>
<div style="float:left">
<font size="3">drugClass</font>
</div>
<div style="float:right">
<input id="selectDrugClasses">
</div>
</div>
<div>
<table>
<tr>
<td height="110"></td>
<td height="110"></td>
</tr>
</table>
</div>
<div>
<div style="float:left">
<font size="3">CLASS</font>
</div>
<div style="float:right">
<input id="selectIndications">
</div>
</div>
</div>
<div class="narrowByBlock">
<table><tr><td style="width:10px"></td>
<td> <div style="float:right"><input type="radio" checked="true">include
<input type="radio">exclude
</div>
</td>
</tr>
</table>
<div style="float:left">
<font size="3">CLINICAL</font>
</div>
<div style="float:right">
<input id="selectAdverseEffects">
</div>
<div>
<table>
<tr>
<td height="90"></td>
<td height="90"></td>
</tr>
</table>
</div>
<table border="1"><tr><td style="width:10px"></td>
<td><div style="float:right">
<input type="radio" checked="true">include
<input type="radio">exclude
</div></td></tr>
</table>
<div>
<div style="float:left">
<font size="3">Suggestion</font>
</div>
<div style="float:right">
<input id="selectDrugInteractions">
</div>
</div>
</div>
<div>
<div class="compareAndClearFields">
<input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()">
<a onClick="resetForm()">clearAllFields</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 2
Akhil
Reputation: 967
We can limit the impact of alignment fail to a certain extend using css styling. If you intention is to make the page dynamically re align with zooming. I prefer you to make it an Responsive design. Use Boot Strap it is a powerful tool which can solve these issues.
Just as a temporary fix change these styles
div.searchByBlock {
border-color: #000000;
border-style: ridge;
float: left;
height: 70%;
margin: 1% 1% 1% 2%;
width: 45%;
}
div.narrowByBlock {
border-color: #000000;
border-style: ridge;
float: left;
height: 70%;
margin: 1% 2%;
width: 45%;
}
div.advancedDrugSearchOuterLayout {
border-color: #005CE5;
border-style: groove;
float: left;
height: 430px;
margin-left: 10%;
margin-right: 10%;
margin-top: 1%;
}
Upvotes: 1
Related Questions
- html layout messed up when i zoom in or out
- Zoom changes the design layout
- Why does the zoom changes the design layout of my html page?
- Browser zoom and elements width
- Looks fine when it's 100% zoom but when I zoom out everything went out of place
- css layout get distorted when zoom in
- Alignment is changed while zooming webpage
- Website alignment breaks on browser zoom
- html, how to make elements not shift when browser zooms?
- Browser Zooming Misaligned Workaround