Positioning Submission Form in a Fluid Manner
This should be my last question for my landing page's responsive design (special thanks to Ronpat for the invaluable knowledge and help). The form submission (i.d.'s of #submissionform and #successfulsubmit) that appears after #emailbox receives valid input was overlooked when putting together the fluid design. For the static design, the forms were positioned absolutely. Now, I'm thinking it may be the solution to remove the positioning property and just use margin:0 auto; to keep the forms in the center, but that's probably not it- that's already in the styles.
If you view the CSS for the forms, you will see that I tried to apply percentages instead of pixel values to the bottom and left properties. That works to a certain extent, until the browser becomes so thin in width.
It is my goal to have the forms sit nicely in the center of the page, obviously.
Finished Reading the Reference
I have given it all a good read. I learned more about absolute and relative positioning. Absolute positioning I already had a working understanding, but I picked some things up on relative positioning.
Now, on to the proving ground...
I have 2 questions that build on each other.
1. Since the submission form needs to be nested elsewhere in the document flow, should it be placed up a line so that it is inside of #lpfoot, the footer content div? If not, where should this be re-placed?
2. Why does it need to be there?
I should be able to tackle it myself as long as I know where the submission form needs to be moved to.
#submissionform looks like THAT?!?
Ay carumba! :eek::blush::confused::rolleyes::nono::mad::(
I cannot afford to let #submissionform look like that!
In fact, your corrected version is not even as tall as it needs to be. I need to make one even taller than that... but mainly, just wider! There needs to be more room for #errormessage to display an error code, and I'd like to get the submit buttons up in the graphic as well.
What styles are causing it to look like that? I used only pixel units when styling the form elements inside there... I see what I want to see over here. Desktop resolution: 1366 px by 768 px