Welcome to WebmasterWorld Guest from 54.145.209.34

Forum Moderators: not2easy

Css Form Shifting Out of Place

absolutely positioned form, minimized screen

   
12:03 am on Mar 2, 2012 (gmt 0)



Hi everyone! I am hoping someone can give me a solution to this issue I am having. I have developed a simple form to go on the index page with a simple Name, Email fields and a send button. The form has not launched yet and is in development. The form is located in my footer, which is relatively positioned and the form itself is positioned with absolute inside the footer. While everything else in the footer stays relatively perfect, the form is shifting down and down as the screen is being minimized and going on top of things on the bottom. This is only happening to the form itself and I cannot figure out if I am missing something. Here is the code:

<form>
Name: <input type="text" name="firstname"/>
Email: <input type="text" name="mail"/>
<input type="submit" value="send"/>
</form>

form{
position: absolute;
font-size:0.8em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0.15em;
left: 520px;
bottom: 120px;
white-space:nowrap;
}

input {
background-color:#FFF;
height:50%;
display:inline;

}

Some more information: The form is located in the right top side of the footer and as the screen is minimized, it slides down lower and lower until its almost halfway down my footer. Everything else in the footer stays in its place.
Am I missing a simple solution? Any help would be appreciated!
2:14 am on Mar 2, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi jenyarubanova,

If the footer itself is getting "longer", this sounds like expected behaviour from an absolutely positioned element inside one that is relatively positioned. The form has been directed to position itself relative to the top left of footer so it will always be 520px from the left and 120px up from the bottom of footer.

Absolute elements are also "removed from the flow" which means they will be drawn as if the other elements aren't present. That means the form will be drawn at the specified left/bottom location, even if that means it is "on top" of other elements.
2:35 am on Mar 2, 2012 (gmt 0)



Hi, totally makes sense but what I am not getting is why are all the other elements stay positioned somewhat to where they are supposed to and not the form? And how would I go about fixing this problem? Thanks again!
10:16 am on Mar 2, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi Jenya, are the other elements inside footer positioned? From your description I suspect not and if I am right, they are "in flow" so will adjust themselves so they are "positioned somewhat to where they are supposed to" as the viewport (and so footer) changes size.

However, as I said above, an absolutely positioned element has been "removed from the flow". If it is the only element out of the flow it will be the only element behaving differently.

To fix, remove the position:absolute and try using margins to achieve the layout you want instead.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month