Alignment of labels within a form and wrapping a containing parent element

AEM542 · June 2, 2014, 1:53pm

Hi everyone,

I have form code below. I also have the css below. The css is causing all elements within the form with an id of msform to be centred. I’d like the input fields to be centred but not the labels. I wondered if anyone could tell me how to target the labels with css in order to left align them but to keep the input fields centred?

Also, you can see in the html that the following code gives the div an explicit height of 1000px:

I’d prefer that I didn’t have to give it a height but that the div naturally wraps around the form but if I don’t give it height it collapses. I’m assuming that this is because of the absolutely positioned field sets. Is there a way to make the containing div wrap around the form?

I’d really appreciate any advice.

Thanks in advance.



#msform {
	width: 550px;
	margin: 10px auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px 0;
	
	box-sizing: border-box;
	width: 90%;
	margin: 0 5%;
	
	/*stacking fieldsets above each other*/
	position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}

/*inputs
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}*/
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #333;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}

#progressbar li {
	list-style-type: none;
	color: black;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
    padding-bottom: 10px;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 50px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}


<html>
    <head>
        <title>Join</title>
        <link rel="stylesheet" href="/_assets/css/styles.css" />
    </head>
    <body>
        <div class="columns large-8" style="height: 1000px; background-color: #e4dab8;">
        <div class="signup form">
        <h4 style="text-align: center; color: white;">Membership Application Form</h4>
        <form id="msform" name="catwebformform54637" method="post" onsubmit="return checkWholeForm54637(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=70776&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}">
            <p style="text-align: left;"> <span class="req">*</span>  Required</p>
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Account Setup </li>
                <li> Personal Details </li>
                <li> Home Address </li>
            </ul>
            <fieldset class="step1">
            <legend class="fs-title">Account Setup</legend>
            <table class="webform" cellspacing="0" cellpadding="2" border="0">
                <tbody>
                    <tr>
                        <td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
                        <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" /> </td>
                    </tr>
                    <tr>
                        <td><label for="Password">Password <span class="req">*</span></label><br />
                        <input type="password" name="Password" id="Password" class="cat_textbox" maxlength="255" autocomplete="off" /></td>
                    </tr>
                    <tr>
                        <td><label for="PasswordConfirm">Confirm Password <span class="req">*</span></label><br />
                        <input type="password" name="PasswordConfirm" id="PasswordConfirm" class="cat_textbox" maxlength="255" autocomplete="off" /></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" /></td>
                    </tr>
                </tbody>
            </table>
            </fieldset>
            <fieldset class="step2">
            <legend class="fs-title">Personal Details</legend>
            <table class="webform" cellspacing="0" cellpadding="2" border="0">
                <tbody>
                    <tr>
                        <td><label for="Title">Title</label><br />
                        <select name="Title" id="Title" class="cat_dropdown_smaller">
                        <option value="913142">Dr</option>
                        <option value="913141">Miss</option>
                        <option value="913138" selected="selected">Mr</option>
                        <option value="913139">Mrs</option>
                        <option value="913140">Ms</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td><label for="FirstName">First Name <span class="req">*</span></label><br />
                        <input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
                    </tr>
                    <tr>
                        <td><label for="CAT_Custom_329121_128444">Middle Name</label><br />
                        <input type="text" maxlength="4000" name="CAT_Custom_329121_128444" id="CAT_Custom_329121_128444" class="cat_textbox" /></td>
                    </tr>
                    <tr>
                        <td><label for="LastName">Last Name <span class="req">*</span></label><br />
                        <input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
                    </tr>
                    <tr>
                        <td><label for="CAT_Custom_329249_128500">Profession</label><br />
                        <input type="text" maxlength="4000" name="CAT_Custom_329249_128500" id="CAT_Custom_329249_128500" class="cat_textbox" /></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
                        </td>
                    </tr>
                </tbody>
            </table>
            </fieldset>
            <fieldset class="step3">
            <legend class="fs-title">Home Address </legend>
            <table class="webform" cellspacing="0" cellpadding="2" border="0">
                <tbody>
                    <tr>
                        <td><label for="HomeAddress">Home Address </label><br />
                        <input type="text" name="HomeAddress" id="HomeAddress" class="cat_textbox" maxlength="500" /></td>
                    </tr>
                    <tr>
                        <td><label for="CAT_Custom_329119_128443">Home Address2</label><br />
                        <input type="text" maxlength="4000" name="CAT_Custom_329119_128443" id="CAT_Custom_329119_128443" class="cat_textbox" /></td>
                    </tr>
                    <tr>
                        <td><label for="HomeCity">City <span class="req">*</span></label><br />
                        <input type="text" name="HomeCity" id="HomeCity" class="cat_textbox" maxlength="255" /></td>
                    </tr>
                    <tr>
                        <td><label for="HomeState">State <span class="req">*</span></label><br />
                        <input type="text" name="HomeState" id="HomeState" class="cat_textbox" maxlength="255" /></td>
                    </tr>
                    <tr>
                        <td><label for="HomeZip">Zipcode/Postcode <span class="req">*</span></label><br />
                        <input type="text" name="HomeZip" id="HomeZip" class="cat_textbox" maxlength="255" /></td>
                    </tr>
                    <tr>
                        <td><label for="HomeCountry">Country <span class="req">*</span></label><br />
                        <select name="HomeCountry" id="HomeCountry" class="cat_dropdown">
                        <option value=" ">-- Select Country --</option>
                        <option value="AF">AFGHANISTAN</option>
                        <option value="AX">ALAND ISLANDS</option>
                        <option value="AL">ALBANIA</option>
                        <option value="DZ">ALGERIA</option>
                        <option value="AS">AMERICAN SAMOA</option>
                        <option value="AD">ANDORRA</option>
                        <option value="AO">ANGOLA</option>
                        <option value="AI">ANGUILLA</option>
                        <option value="AQ">ANTARCTICA</option>
                        <option value="AG">ANTIGUA AND BARBUDA</option>
                        <option value="AR">ARGENTINA</option>
                        <option value="AM">ARMENIA</option>
                        <option value="AW">ARUBA</option>
                        <option value="AU" selected="selected">AUSTRALIA</option>
                        <option value="AT">AUSTRIA</option>
                        <option value="AZ">AZERBAIJAN</option>
                        <option value="BS">BAHAMAS</option>
                        <option value="BH">BAHRAIN</option>
                        <option value="BD">BANGLADESH</option>
                        <option value="BB">BARBADOS</option>
                        <option value="BY">BELARUS</option>
                        <option value="BE">BELGIUM</option>
                        <option value="BZ">BELIZE</option>
                        <option value="BJ">BENIN</option>
                        <option value="BM">BERMUDA</option>
                        <option value="BT">BHUTAN</option>
                        <option value="BO">BOLIVIA</option>
                        <option value="BA">BOSNIA AND HERZEGOVINA</option>
                        <option value="BW">BOTSWANA</option>
                        <option value="BV">BOUVET ISLAND</option>
                        <option value="BR">BRAZIL</option>
                        <option value="IO">BRITISH INDIAN OCEAN TERRITORY</option>
                        <option value="BN">BRUNEI DARUSSALAM</option>
                        <option value="BG">BULGARIA</option>
                        <option value="BF">BURKINA FASO</option>
                        <option value="BI">BURUNDI</option>
                        <option value="KH">CAMBODIA</option>
                        <option value="CM">CAMEROON</option>
                        <option value="CA">CANADA</option>
                        <option value="CV">CAPE VERDE</option>
                        <option value="KY">CAYMAN ISLANDS</option>
                        <option value="CF">CENTRAL AFRICAN REPUBLIC</option>
                        <option value="TD">CHAD</option>
                        <option value="CL">CHILE</option>
                        <option value="CN">CHINA</option>
                        <option value="CX">CHRISTMAS ISLAND</option>
                        <option value="CC">COCOS (KEELING) ISLANDS</option>
                        <option value="CO">COLOMBIA</option>
                        <option value="KM">COMOROS</option>
                        <option value="CG">CONGO</option>
                        <option value="CD">CONGO, THE DEMOCRATIC REPUBLIC OF THE</option>
                        <option value="CK">COOK ISLANDS</option>
                        <option value="CR">COSTA RICA</option>
                        <option value="CI">C&Ocirc;TE D'IVOIRE</option>
                        <option value="HR">CROATIA</option>
                        <option value="CU">CUBA</option>
                        <option value="CY">CYPRUS</option>
                        <option value="CZ">CZECH REPUBLIC</option>
                        <option value="DK">DENMARK</option>
                        <option value="DJ">DJIBOUTI</option>
                        <option value="DM">DOMINICA</option>
                        <option value="DO">DOMINICAN REPUBLIC</option>
                        <option value="EC">ECUADOR</option>
                        <option value="EG">EGYPT</option>
                        <option value="SV">EL SALVADOR</option>
                        <option value="GQ">EQUATORIAL GUINEA</option>
                        <option value="ER">ERITREA</option>
                        <option value="EE">ESTONIA</option>
                        <option value="ET">ETHIOPIA</option>
                        <option value="FK">FALKLAND ISLANDS (MALVINAS)</option>
                        <option value="FO">FAROE ISLANDS</option>
                        <option value="FJ">FIJI</option>
                        <option value="FI">FINLAND</option>
                        <option value="FR">FRANCE</option>
                        <option value="GF">FRENCH GUIANA</option>
                        <option value="PF">FRENCH POLYNESIA</option>
                        <option value="TF">FRENCH SOUTHERN TERRITORIES</option>
                        <option value="GA">GABON</option>
                        <option value="GM">GAMBIA</option>
                        <option value="GE">GEORGIA</option>
                        <option value="DE">GERMANY</option>
                        <option value="GH">GHANA</option>
                        <option value="GI">GIBRALTAR</option>
                        <option value="GR">GREECE</option>
                        <option value="GL">GREENLAND</option>
                        <option value="GD">GRENADA</option>
                        <option value="GP">GUADELOUPE</option>
                        <option value="GU">GUAM</option>
                        <option value="GT">GUATEMALA</option>
                        <option value="GG">GUERNSEY</option>
                        <option value="GN">GUINEA</option>
                        <option value="GW">GUINEA-BISSAU</option>
                        <option value="GY">GUYANA</option>
                        <option value="HT">HAITI</option>
                        <option value="HM">HEARD ISLAND AND MCDONALD ISLANDS</option>
                        <option value="VA">HOLY SEE (VATICAN CITY STATE)</option>
                        <option value="HN">HONDURAS</option>
                        <option value="HK">HONG KONG</option>
                        <option value="HU">HUNGARY</option>
                        <option value="IS">ICELAND</option>
                        <option value="IN">INDIA</option>
                        <option value="ID">INDONESIA</option>
                        <option value="IR">IRAN, ISLAMIC REPUBLIC OF</option>
                        <option value="IQ">IRAQ</option>
                        <option value="IE">IRELAND</option>
                        <option value="IL">ISRAEL</option>
                        <option value="IT">ITALY</option>
                        <option value="JM">JAMAICA</option>
                        <option value="JP">JAPAN</option>
                        <option value="JE">JERSEY</option>
                        <option value="JO">JORDAN</option>
                        <option value="KZ">KAZAKHSTAN</option>
                        <option value="KE">KENYA</option>
                        <option value="KI">KIRIBATI</option>
                        <option value="KP">KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF</option>
                        <option value="KR">KOREA, REPUBLIC OF</option>
                        <option value="KW">KUWAIT</option>
                        <option value="KG">KYRGYZSTAN</option>
                        <option value="LA">LAO PEOPLE'S DEMOCRATIC REPUBLIC</option>
                        <option value="LV">LATVIA</option>
                        <option value="LB">LEBANON</option>
                        <option value="LS">LESOTHO</option>
                        <option value="LR">LIBERIA</option>
                        <option value="LY">LIBYAN ARAB JAMAHIRIYA</option>
                        <option value="LI">LIECHTENSTEIN</option>
                        <option value="LT">LITHUANIA</option>
                        <option value="LU">LUXEMBOURG</option>
                        <option value="MO">MACAO</option>
                        <option value="MK">MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF</option>
                        <option value="MG">MADAGASCAR</option>
                        <option value="MW">MALAWI</option>
                        <option value="MY">MALAYSIA</option>
                        <option value="MV">MALDIVES</option>
                        <option value="ML">MALI</option>
                        <option value="MT">MALTA</option>
                        <option value="MH">MARSHALL ISLANDS</option>
                        <option value="MQ">MARTINIQUE</option>
                        <option value="MR">MAURITANIA</option>
                        <option value="MU">MAURITIUS</option>
                        <option value="YT">MAYOTTE</option>
                        <option value="MX">MEXICO</option>
                        <option value="FM">MICRONESIA, FEDERATED STATES OF</option>
                        <option value="MD">MOLDOVA, REPUBLIC OF</option>
                        <option value="MC">MONACO</option>
                        <option value="MN">MONGOLIA</option>
                        <option value="ME">MONTENEGRO</option>
                        <option value="MS">MONTSERRAT</option>
                        <option value="MA">MOROCCO</option>
                        <option value="MZ">MOZAMBIQUE</option>
                        <option value="MM">MYANMAR</option>
                        <option value="NA">NAMIBIA</option>
                        <option value="NR">NAURU</option>
                        <option value="NP">NEPAL</option>
                        <option value="NL">NETHERLANDS</option>
                        <option value="AN">NETHERLANDS ANTILLES</option>
                        <option value="NC">NEW CALEDONIA</option>
                        <option value="NZ">NEW ZEALAND</option>
                        <option value="NI">NICARAGUA</option>
                        <option value="NE">NIGER</option>
                        <option value="NG">NIGERIA</option>
                        <option value="NU">NIUE</option>
                        <option value="NF">NORFOLK ISLAND</option>
                        <option value="MP">NORTHERN MARIANA ISLANDS</option>
                        <option value="NO">NORWAY</option>
                        <option value="OM">OMAN</option>
                        <option value="PK">PAKISTAN</option>
                        <option value="PW">PALAU</option>
                        <option value="PS">PALESTINIAN TERRITORY, OCCUPIED</option>
                        <option value="PA">PANAMA</option>
                        <option value="PG">PAPUA NEW GUINEA</option>
                        <option value="PY">PARAGUAY</option>
                        <option value="PE">PERU</option>
                        <option value="PH">PHILIPPINES</option>
                        <option value="PN">PITCAIRN</option>
                        <option value="PL">POLAND</option>
                        <option value="PT">PORTUGAL</option>
                        <option value="PR">PUERTO RICO</option>
                        <option value="QA">QATAR</option>
                        <option value="RE">REUNION</option>
                        <option value="RO">ROMANIA</option>
                        <option value="RU">RUSSIAN FEDERATION</option>
                        <option value="RW">RWANDA</option>
                        <option value="BL">SAINT BARTH&Eacute;LEMY</option>
                        <option value="SH">SAINT HELENA</option>
                        <option value="KN">SAINT KITTS AND NEVIS</option>
                        <option value="LC">SAINT LUCIA</option>
                        <option value="MF">SAINT MARTIN</option>
                        <option value="PM">SAINT PIERRE AND MIQUELON</option>
                        <option value="VC">SAINT VINCENT AND THE GRENADINES</option>
                        <option value="WS">SAMOA</option>
                        <option value="SM">SAN MARINO</option>
                        <option value="ST">SAO TOME AND PRINCIPE</option>
                        <option value="SA">SAUDI ARABIA</option>
                        <option value="SN">SENEGAL</option>
                        <option value="RS">SERBIA</option>
                        <option value="CS">SERBIA AND MONTENEGRO</option>
                        <option value="SC">SEYCHELLES</option>
                        <option value="SL">SIERRA LEONE</option>
                        <option value="SG">SINGAPORE</option>
                        <option value="SK">SLOVAKIA</option>
                        <option value="SI">SLOVENIA</option>
                        <option value="SB">SOLOMON ISLANDS</option>
                        <option value="SO">SOMALIA</option>
                        <option value="ZA">SOUTH AFRICA</option>
                        <option value="GS">SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS</option>
                        <option value="ES">SPAIN</option>
                        <option value="LK">SRI LANKA</option>
                        <option value="SD">SUDAN</option>
                        <option value="SR">SURINAME</option>
                        <option value="SJ">SVALBARD AND JAN MAYEN</option>
                        <option value="SZ">SWAZILAND</option>
                        <option value="SE">SWEDEN</option>
                        <option value="CH">SWITZERLAND</option>
                        <option value="SY">SYRIAN ARAB REPUBLIC</option>
                        <option value="TW">TAIWAN</option>
                        <option value="TJ">TAJIKISTAN</option>
                        <option value="TZ">TANZANIA, UNITED REPUBLIC OF</option>
                        <option value="TH">THAILAND</option>
                        <option value="TL">TIMOR-LESTE</option>
                        <option value="TG">TOGO</option>
                        <option value="TK">TOKELAU</option>
                        <option value="TO">TONGA</option>
                        <option value="TT">TRINIDAD AND TOBAGO</option>
                        <option value="TN">TUNISIA</option>
                        <option value="TR">TURKEY</option>
                        <option value="TM">TURKMENISTAN</option>
                        <option value="TC">TURKS AND CAICOS ISLANDS</option>
                        <option value="TV">TUVALU</option>
                        <option value="UG">UGANDA</option>
                        <option value="UA">UKRAINE</option>
                        <option value="AE">UNITED ARAB EMIRATES</option>
                        <option value="GB">UNITED KINGDOM</option>
                        <option value="US">UNITED STATES</option>
                        <option value="UM">UNITED STATES MINOR OUTLYING ISLANDS</option>
                        <option value="UY">URUGUAY</option>
                        <option value="UZ">UZBEKISTAN</option>
                        <option value="VU">VANUATU</option>
                        <option value="VE">VENEZUELA</option>
                        <option value="VN">VIETNAM</option>
                        <option value="VG">VIRGIN ISLANDS, BRITISH</option>
                        <option value="VI">VIRGIN ISLANDS, U.S.</option>
                        <option value="WF">WALLIS AND FUTUNA</option>
                        <option value="EH">WESTERN SAHARA</option>
                        <option value="YE">YEMEN</option>
                        <option value="ZM">ZAMBIA</option>
                        <option value="ZW">ZIMBABWE</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td><label for="HomePhone">Home Phone Number </label><br />
                        <input type="text" name="HomePhone" id="HomePhone" class="cat_textbox" maxlength="255" /></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
                        </td>
                        <td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="submit" name="Submit" id="catwebformbutton" value="Submit" class="submit action-button" />
                        </td>
                    </tr>
                </tbody>
            </table>
            </fieldset>
        </form>
        </div>
        </div>
        </div>
    </body>
</html>

PaulOB · June 2, 2014, 2:12pm

Hi,

Something like this might help.


#msform{padding:0 0 20px}
#msform label{display:block;text-align:left!important}
#msform label + br{display:none}
#msform fieldset.step1 {position:relative}
.columns.large-8{height:auto!important;}

There was no need for the fieldset to be absolutely positioned as far as I could tell from that snippet.

AEM542 · June 2, 2014, 2:34pm

Thanks so much for the code. All working well now.

system · October 8, 2014, 6:08am