Hi,
I have a form and an image of a submit button on a page. When the window is resized (zoomed in/out) the gap between the two shrinks and eventually the button sits on top of the form. I was wondering if there is a way of keeping the gap constant when the window is being resized. I know it is possible because I have seen it on other web sites. I would be very grateful for your help.
<html>
<head>
<style type="text/css">
body
{ text-align:center;}
#wrapper
{ position:relative;
text-align:left;
margin: 0 auto;
width: 1010px;
}
</style>
</head>
<body>
<div id="wrapper">
<div style="position:relative;left:0px;top:0px;width:1010px;
height:90px;background-color:cyan;color:#000000;">
<form name="Foo" style="position:absolute;left:662px;top:53px;">
<input type="text" name="usedForID" size="43"
value=" Keyword, Product Name, Product Code"
onclick="if(this.value=='Enter Keyword or Product Code')
{this.value='';}"/>
</form>
<div style="position:absolute;left:930px;top:53px;width:45px;height:23px;">
<a href="">
<img src="search_go.gif"
alt="" width="45" height="23"/></a>
</div>
</div>
</div>
</body>
</html>
Keeping gap between elements constant when resizing window
Moderator: General Moderators
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Keeping gap between elements constant when resizing wind
For a fluid layouts use % instead of px
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering