Adding Form Submit Button Causes Input Fields to Move

[d'Anconia]

Okay so this is confusing the heck out of me and a good example of why I dislike HTML and CSS. I am using Google Chrome to test out an eCommerce site that I am trying to create for my portfolio.

For one part, when I create a cart and want the customer to be able to enter their quantities and update their cart, the positioning of the <input type="text"> areas are acting silly.

At first when I have the <form> field included but have not yet added the "Update" button (and containing div), the positioning of the text inputs seems to be fine:


*Notice the HTML structure in the console area*

But when I add the Update Cart button (and containing div) to the form all of the sudden the text input fields all get shoved down by approximately one cart div or so:


Does anyone know why this is happening? It seems to only happen when I add the actual div containing the "Update Cart" button. I cannot find anything in my CSS that would cause this to happen. I can post my style sheet if necessary.

[sugisha]

Please post your css

[webdevs]

Can you please show me your CSS to resolve the issue?

[d'Anconia]

/*
CSS Credit: http://www.templatemo.com
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: arial, verdana, Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #dbdada;
	background: #333333;
}

a:link, a:visited { color: #5b93ef; text-decoration: underline; font-weight: normal; } 
a:active, a:hover { color: #5b93ef; text-decoration: none; }

p {
	margin: 0px;
	padding: 0px;
}

img {
	margin: 0px;
	padding: 0px;
	border: none;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;	}
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px;	}
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;	}
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;	}
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;	}
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;	}
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;	}

.margin_right_40 { margin-right: 40px; }
.margin_right_70 { margin-right: 70px; }

.fl { float: left; }
.fr { float: right }

.em_text {
	color: #ffffff;
}

.button_01 a {
	display: inline;
	width: 95px;
	height: 21px;
	padding: 5px 25px 0 0;
	background: url(../images/templatemo_button_01.jpg) no-repeat;	
	color: #dcdada;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.header_01 {
	clear: both;
	height: 27px;
	padding: 8px 0 0 10px;
	margin-bottom: 20px;
	background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;	
	font-size: 20px;
	color: #ffffff;
}

.header_02 {
	clear: both;
	padding-bottom: 10px;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        margin-left: 10px;
	font-size: 24px;
        line-height: 100%;
	color: #ffffff;
        background-color: #000000;
        opacity:0.75;
        filter:alpha(opacity=75); /* For IE8 and earlier */
        position: relative;
        top: 10px;
        width: 400px;
        border: 1px #555555 solid;
}


.header_03 {
	clear: both;
	padding: 0px 0 0 0px;
	background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;	
	font-size: 20px;
	color: #ffffff;
        width: 200px;
        text-align: left;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        border: 1px #555555 solid;
}




.special_header {
	clear: both;
	padding: 0px 0 0 0px;
	background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;	
	font-size: 20px;
	color: #00ff00;
        width: 200px;
        text-align: left;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        border: 1px #555555 solid;
}

.header_03 a {
        text-decoration: none;
        color: #ffffff;
}

.header_02 p {
        font-size: 18px;
        line-height: 120%;
	color: #ffffff; 
}

.login_form {
        min-width:50%; 
        margin: 0 auto 0 0;
        padding:0 0 0 20px;
        display: inline-block;
}

caption {
        text-align: left;
}

table {
        width: 90%;
}

.red_text {
        color: red;
}

#error_span {
        color: red;
}

td.form_left { height: 30px; text-align: right;}
td.form_right { height: 30px; text-align: left;}


#templateo_container {
	width: 1100px; 
	/* padding: 0 10px; */  
	margin: 0 auto;
}

/* top panel */

#templatemo_top_panel {
	clear: both;
	/*width: 960px;*/
	height: 110px;
	padding: 3px 0;
}

#site_logo {
	float: left;
	width: 450px;
	height: 110px;
}

#site_logo a {
	outline: none;
}

#site_title {
	float: left;
	width: 450px;
	margin-top: 30px;
	font-size: 40px;
	padding: 10px 0;
	color: #e8e8e8;
}

#site_title a {
	color: #e8e8e8;
	text-decoration: none;
}

#site_title span {
	/*display: block; */
	margin-left: 70px;
	margin-top: 20px;
	font-size: 16px;
	color: #767676;
}

#header_menu_section {
	float: right;
	width: 320px;
        display: inline;
        font-size: 1.4em;
}

.header_menu a {
	float: right;
	/*display: block;*/
        display: inline;
	width: 100px;
	height: 93px;
	outline: none;
}

.home_menu a { background: url(../images/home_icon.jpg) no-repeat; background-size: 70%; }
.home_menu a:hover { background: url(../images/home_icon_hover.jpg) no-repeat; background-size: 70%; }

.contact_menu a { background: url(../images/contact_icon.jpg) no-repeat; background-size: 70%; }
.contact_menu a:hover { background: url(../images/contact_icon_hover.jpg) no-repeat; background-size: 70%;}

/* end of top panel */

/* menu & banner panel */

#templatemo_menu_banner_panel {
	clear: both;
	/* height: 280px; */
	padding: 10px;
	background: #3c3b3b;
	overflow: hidden;
        margin-right: auto;
        margin-left: auto;
}

/* menu */

#templatemo_menu_wrapper {
	margin-right: auto;
        margin-left: auto;
        width: 642px;
	/* height: 278px; */
	background: #111111;
	overflow: hidden;
}

#templatemo_menu {
	padding-top: 12px; 
        padding-bottom: 12px;
	border: 1px solid #313131;
	background: #262626;
	overflow: hidden;	
        text-align: center;
}

#templatemo_menu a {
	/*display: block; */
        text-align: center;
        margin-right: 0px;
        margin-left: 0px;
	/* width: 170px; */
	height: 28px;
	padding: 10px 10px 10px 10px;
	color: #9fa2a4;
	font-size: 16px;
	text-decoration: none;
	font-weight: normal;
	/* background: url(../images/templatemo_menu_list_icon.jpg) left center no-repeat; */
	outline: none;
        border: solid 2px #3C3B3B;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
	color: #ffffff;
	
}

#templatemo_menu .last {
	margin-bottom: 0px;
}

/* end of menu*/

#templatemo_banner {
	float: left;
	width: 1080px;
        height: 200px;
	padding: 0px;
	overflow: hidden;
	background: url(../images/laser_rave_1100x200.jpg) no-repeat;
}

#templatemo_banner p {
	
}

#templatemo_banner_title {
        line-height: 140%;
}

#templatemo_banner a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

/* end of menu & banner panel */

#templatemo_content_wrapper {
	clear: both;
	width: 1080px;
	background: #3c3b3b;
	padding: 10px;
	margin-top: 10px;	
}

.large_form {
	clear: both;
	width: 1080px;
	background: #3c3b3b;
	padding: 10px;
	margin-top: 10px;	

}

#templatemo_content {
	padding: 10px;
	background: #262626;
        min-height: 275px;
        overflow: hidden;
}

#registration_form {
    display: inline-block;
}

#submit_product_form {
    display: inline-block;
    min-width: 50%;
}

.product_box {
    width: 250px;
    height: 300px;
    text-align: left;
    border: 1px solid #aaaaaa;
    display: inline-block;
    padding: 18px 8px 8px 8px;
    margin: 2px 2px 2px 2px;
    border-radius:12px;
    -moz-border-radius:12px;
}

.cart_product {
    /* width: 60%; */
    height: 168px;
    text-align: left;
    border: 1px solid #aaaaaa;
    /* display: inline-block; */
    padding: 8px 8px 8px 8px;
    margin: 2px 2px 2px 2px;
    border-radius:12px;
    -moz-border-radius:12px;
}

.cart_product_image{
    display: inline-block;
    vertical-align: middle;
    min-width: 150px;
    min-height: 150px;
    text-align: center;
}

.cart_product_image a{
    vertical-align: middle;
}

.cart_product_info{
    display: inline-block;
    margin-left: 25px;
    /* vertical-align: middle; */
    font-size: 140%;
}

.cart_product_info h2 {
    font-size: 135%;
    padding-top: 0px;
    padding-bottom: 0px;
}

.cart_product_price{
    display: inline-block;
    float: right;
    margin-right: 25px;
    padding-top: 20px;
    text-align: center;
}

.cart_product_quantity{
    display: inline-block;
    float: right;
    margin-right: 25px;
    padding-top: 20px;
    text-align: center;
}

.cart_product_quantity input{
    text-align: center;
}

.product_box div {
    text-align: center;
    font-size: 1.5em;
    margin-left: auto;
    margin-right: auto;
}

.product_box input {
    text-align: center;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
}

.product_image {
    text-align: center;
    width: 200px;
    height: 200px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    vertical-align: middle;

}

.cart_image {
    text-align: center;
    /* width: 200px; */
    /* height: 200px; */
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;

}

.product_image img {
    max-width: 196px;
    max-height: 200px;
    border: 0px;
}

.form_header {
    text-align: center;
}

.submit {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

#templatemo_side_column {
	display: inline-block;
        float: left; 
	width: 225px;
}

.side_column_content {
	clear: both;
	padding: 0px;
}

.news_section {
	clear: both;
	margin-bottom: 20px;
}

.news_date {
	color: #ffffff;
	font-weight: bold;
}

.news_title {
	font-size: 12px;
	color: #5b93ef;
	font-weight: bold;
}

#templatemo_main_content_column {
	float: right;
	width: 820px;
}

.section_w600 {
	padding: 0px;
}

#templatemo_main_content_column p {
	margin-bottom: 15px;
}

#templatemo_main_content_column img {
	/* border: 10px solid #000000; 
	margin-bottom: 5px; */
}

.fl_image {
	float: left;
	margin: 3px 15px 5px 0;
}

.section_w280 {
	width: 260px;
}

.section_w280_content {
	padding: 0px;
}

.content_list_01 {
	margin: 0 0 0 10px;
	padding: 0px;
}

.content_list_01 li {
	margin: 0px;
	padding: 0 0 0px 0;
	list-style: decimal-leading-zero;
}

/* end of content */

/* footer */
#templatemo_footer {
	clear: both;
	width: 1000px;
	padding: 20px 0px;
	text-align: center;
}

#templatemo_footer a {
	color: #ffffff;
	text-decoration: none;
}
/* end of footer */