Keeping gap between elements constant when resizing window

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
raydona
Forum Newbie
Posts: 21
Joined: Sat Mar 21, 2009 9:17 am

Keeping gap between elements constant when resizing window

Post by raydona »

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="&nbsp;&nbsp;&nbsp;&nbsp;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>
User avatar
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

Post by social_experiment »

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
Post Reply