My Form Will Not Remain Inside My "Container" Div Border

Hi, I’m having a problem with my form remaining inside the borders of my “container” div! I’ve tried everything and nothing works! Here is the link to my Code Pen: https://codepen.io/IDCoder/pen/OWbXLw?editors=1100. Thankyou in advance for your help!

I don’t understand what you problem is. The form looks just fine to me.

Hi, do you see that black border/outline that begins at the top of the webpage and stops above the form? It’s not supposed to stop there. It is supposed to continue all the way below the form, as it is a “container” div. That is the problem that I’m having…

Oh I thought that was a design pattern. U should have replied to me using the reply button. That way i could have been notified sooner of your reply. Ok lemme take another look.

This line (line 6) has the error, see if you can spot it:
<img src="https://s28.postimg.org/y86hujuwt/Gebre_Mesquitta_HTML_Element.jpg/" class="class="img-responsive">

Hi, thanks for showing me that mistake, that fixed the responsive-ness of an image…making it able to downsize properly for smaller screens aka mobile applications…but the other problem that I mentioned before, that still doesn’t work…I want the container border to go all the way to the bottom of the form, and it should, but there is a mistake in the code somwhere…I can’t figure it out for the life of me…

Problem: Do you see that black border/outline that begins at the top of the webpage and stops above the form? It’s not supposed to stop there. It is supposed to continue all the way below the form, as it is a “container” div. That is the problem that I’m having…

I am messing around with it. Seems the styles of the id #contact-form is creating problems.

1 Like

@MtZionCode I solved the problem but the question is how can I give the source files to you.
Edit: I decided to put the edited code up on github. Download it from there and run on your pc. The link: https://github.com/Tan-Moy/Gebre-Mesquitta

Wow! Thanks man! I’m about to go and check it out right now!

1 Like

So adding the tag makes it work!? Amazing…interesting…I wonder why though?

No tags do nothing in this case, though I needed to modify your div tags but the problems were in the style sheet. Compare the one I posted to your original style sheet and you will know.

I meant adding the body tags…and yes definitely going to examine the new code!

Went through the code…great stuff…but I like to know the why behind certain things, in order for certain things to commit to memory. For example, what made you use this enclosing div: div id=“contact-form-container” to enclose the form? What made you “exchange” the following code: code.1 for code 2.?

/#contact-form {
background-color: #0099ff;
padding: 10px 20px 30px 20px;
max-width: 100%;
float: left;
left: 25%;
float: right;
right: 25%;
position: absolute;
margin-top: 30px;
margin-bottom: 20px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
/

#contact-form {
background-color: #0099ff;
text-align: center;
color: black;
order: 1px solid #000000;
padding: 10px 20px 30px 20px;
max-width: 100%;
margin-top: 30px;
margin-bottom: 20px;
border-radius: 20px;
}

I added it so that you can use it to pad your contact form like you did in the original. Try adding padding to both contact-form and contact-form-container and see what happens.

You can add -webkit-border-radius: 20px; -moz-border-radius: 20px; back. I forgot to add those :slight_smile: As for float: left; left: 25%; float: right; right: 25%; I left them out because for some reason they were creating the problems you had and you can use padding in contact-form-container to replace their functionality. Also you can add them back in and see what happens.