1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Keeping gap between elements constant when resizing window

         

raydona

12:56 am on Nov 29, 2010 (gmt 0)

10+ Year Member



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>

SuzyUK

10:35 am on Nov 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi raydona

I think one plan would be to remove the Absolute Positioning where possible, and let the form flow.. there's a touch of divitis in there, as you could put the form element itself to better use, put the submit button inside the form

a good rule of thumb with forms and their elements is that any time you have to assign a "name" attribute for the form/internal element itself the element should also have the same value for its ID, once you have an ID you have your CSS hook too ;)

Anyhow here's one way which should do it, I've given the Form element itself an ID of "foo" to match your name attribute then put the button/image inside the form too.

Then Absolutely Position the form element, giving it enough width/height to contain the text input and the image button. In the code below I've given the form element a temporary color so you can "see" it, then float both the input and the button left inside the form that way they should always stay side by side..

I also removed a div from around the button as you can use the <a> element itself - if your button does not actually land up being a link, perhaps it might be another input or <button> - just ID the element, and use it instead

In the code below I'm not sure the "header" div is your intention for that div, .. anyhow I've left it in and the two colors show where they cover, because the entire form is out of the flow any other content in the "header" would need to be margined to clear the right side. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
body {text-align:center;}

#wrapper { 
position:relative;
text-align:left;
margin: 0 auto;
width: 1010px;
}

#header {
height:90px;
background-color:cyan;
color:#000000;
}

#foo {
position: absolute;
right: 10px;
top: 53px;
width: 320px;
height: 30px; 
background: #ffc; /* temporary to see form element */
}

#usedForID {
float: left;
width: 260px;
height: 19px; /* to match up with image height */
line-height: 18px; /* just to centralise text in input box */
}

#foo .go {float: left; width: 45px;}
#foo .go img {border: 0;}

</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<form name="foo" id="foo">
<input type="text" name="usedForID" id="usedForID" size="43" value="&nbsp;&nbsp;&nbsp;&nbsp;Keyword, Product Name, Product Code" onclick="if(this.value=='Enter Keyword or Product Code'){this.value='';}"/>
<a class="go" href="#"><img src="search_go.gif" alt="#" width="45" height="23"/></a>
</form>
</div>
</div>
</body>
</html>

raydona

1:10 am on Dec 3, 2010 (gmt 0)

10+ Year Member



Hi SuzyUK,
Many thanks for the solution you provided, I applied it and it worked a treat. I wonder if I might ask two questions? Firstly, are there any rules as to where to use position:absolute and where to use position:relative? I find this issue very confusing. Secondly, you mentioned that I use too many divs. I have a bad habit of placing each
element inside a div and placing that div on the page. I wonder if there are any rules regarding when to place and not place elements in divs. Again many thanks for your help.

SuzyUK

10:25 am on Dec 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're Welcome! Glad it worked..

CSS Questions to try and answer, for my 5000th post, seems appropriate :)

Firstly, are there any rules as to where to use position:absolute and where to use position:relative?


position:absolute
takes the whole element, whichever element you use, and subsequently it's children, out of the flow of the page completely. I used to say to think about the AP element like a post-it note you've lifted from the page and then stuck onto the screen, all other content will ignore it and go under it. So in the above case all I did was take the entire form and remove it, there was then no need to absolutely position the elements inside it, they are just like the writing on the post-it note, they will move with the sticker, if you like.. 

position: relative
serves two quite different purposes really,
1. it should be used for "offsetting" an element, it does not remove the element from the flow, and if you offset e.g. a paragraph upwards and leftwards then put another paragraph after it you will see that the original space that the first paragraph should have taken up, before offsetting, is still honoured. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Offset Paragraph </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#wrap {
width: 500px;
background: #eee;
border: 1px solid 000;
margin: 40px;
}

p {margin: 0; background: #dad;}

.offset {position: relative; left: -20px; top: -20px;}

</style>
</head>
<body>
<div id="wrap">
<p class="offset">This is the offset paragraph</p>
<p>This is the normal paragraph</p>
</div>
</body>
</html>


i.e. the first paragraph is not removed from the flow, it's space in the flow is "reserved" - this is probably not used too often.

In order to apply a z-index to an element (stacking) it has to be positioned either relative or absolute, relative positioning is useful for that as you might not want the element removed from the flow, but you might need to start a new stacking context, so you would just use 
position:relative;
with or without "offset" co-ordinates in order to apply a z-index.

2. the next, possibly more important, use of 
position:relative;
is to make an element into a "Containing Block [w3.org]. This affects your absolutely positioned (AP) elements.. if you don't specify a containing block your AP elements will position themselves according to the default, the viewport. It's very difficult, if not impossible, to absolutely position elements, to a flexible width design, without it!

In short a containing block for an element is it's nearest relatively or absolutely positioned ancestor. So in the code example above the #wrapper div is the "containing block" for the <form> - it works OK for this example because the "header" is top and full width, and you can position to the right side of your design rather the try to figure out a variable left or right margin on the entire viewport width. In the case above if the "header" was not actually a header but a section further down the page you could actually make the "header" div itself position:relative; to contain the form code even tighter.

In most designs you will see a wrapper div always made position:relative purely so any Absolutely Positioned elements inside it are contained by the overall design.


...you mentioned that I use too many divs. I have a bad habit of placing each
element inside a div and placing that div on the page. I wonder if there are any rules regarding when to place and not place elements in divs.


Don't worry many do, and bad habits are made to be broken :) - there is no "set in stone" rules as pages will still work with all the extra divs, but it's good practice to cut down on the "tag soup" where possible as you could run into problems with CSS specificity when there are multiple ways to reach an element...

The only "rule" I can think of.. why use an extra element when the one you've got will do ;)

a <div> is a generic container element which should be used to contain a DIVision of content, i.e. a "header" is a division of your document, as would be a "sidebar" "footer" etc..

Your search form could go into a <div class="search"> if you like, as a search form could be the search division of your page.. many people do that just to keep things separate when they're coding, in general, as far as forms go, many find it easier than using the proper element which should possibly be fieldset/legend - legends are a bit more difficult to style than an <hx> inside a <div> - so that's a personal choice :) Your form didn't have a heading which is why I chose to use the form itself

but the likes of your button, that button is part of the form so should be inside the <form> element, it is not a <div>ision of the page/document therefore no need to wrap it another div. It can be targeted by going through the div/fieldset > form > button hierarchy. Another way to train your thinking is to try not think about the end design while coding (I know that's easier said than done!) - remember that a <div> is just another element like <a>, <form>, <p> etc.. and each of these elements through the power of CSS can be made to look and act the same, div or span should be used when no other logical element is available or will do ;)

AS ever, there are many ways to code and apply CSS, it's down to choice in a lot of cases, but it's good practice to at least try with the minimum amount of elements and build up out of choice, it teaches you more about what the nuances (like positioning) of CSS can actually do

Good Luck and Happy coding :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026