homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Css Form Shifting Out of Place
absolutely positioned form, minimized screen

Msg#: 4423899 posted 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:

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

position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0.15em;
left: 520px;
bottom: 120px;

input {


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!



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4423899 posted 2:14 am on Mar 2, 2012 (gmt 0)

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.


Msg#: 4423899 posted 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!


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4423899 posted 10:16 am on Mar 2, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved