This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 months ago.
Image of my Form
I'd like to move this form to the middle of my web page. I have it center aligned currently, but it is at the top of my webpage. I want it smack dab in the middle. I've been trying to google around but this has been a surprisingly difficult answer to find.
html
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
</html>
CSS
div.form {
display: block;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
form li+li {
margin-top: 1em;
}
This should work:
div.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
text-align: left;
}
form li+li {
margin-top: 1em;
}
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
</html>
Super easy, give your container all the view height and then super center it with grid.
I forced your form to half of the view width just to show it was centered.
.form-container {
height: 100vh;
display: grid;
place-items: center;
}
/* this is just style */
form {
margin: 0 auto;
width: 50vw;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
form li+li {
margin-top: 1em;
}
<div class="form form-container">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0" placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0" placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
text-align: left;
}
form li+li {
margin-top: 1em;
}
.form{
display:flex;
height:calc(100vh - 2px);
justify-content:center;
align-items:center;
border:solid 1px red;}
body,html,div{
margin:0;
padding:0;}
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
Related
So I have created a form with different type of elements (including radio, checkbox, text input etc.) and I cannot figure out how to make the whole form look neat. Ideally I want all labels aligned on the left side, except labels for radio buttons which should be aligned with the input fields.
My pen:
https://codepen.io/andreas-soteriou/pen/NWwEywR?editors=1100
I coloured the labels and inputs, for me to visualise as I am fairly new to this!
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type"submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
header, body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,input, select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color:red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color:blue;
margin-top: 2px;
}
header,
body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,
input,
select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color: red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color: blue;
margin-top: 2px;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
Here's a simple starting point using CSS Grid
We are going to use two different grid layouts using the fieldset element and our grid container.
For simple Label | Input pairs the grid's first column will be the label taking 25% of the available space with the input occupying the rest.
For the radio button or check box groups, we will add a class to the fieldset then use three columns with 25% for the group label, auto for the input width, with the input label occupying the rest
fieldset {
border: none;
/*Set up base grid*/
display: grid;
/*Set Columns, first column is 25% the second takes up the rest*/
grid-template-columns: 25% 1fr;
row-gap: 0.5em;
}
/*Label styling*/
fieldset label {
text-align: right;
padding-right: 0.25em;
}
/*Additional set up for button group*/
fieldset.button-group {
/*For out button group rows we want the first col 25% ,
control minimum space, then next col take the rest*/
grid-template-columns: 25% auto 1fr;
}
/*Addditional stylings for the button/checkbox labels*/
fieldset.button-group label:not(:first-of-type) {
text-align: left;
}
/*Bump the buttons & check boxes to second column*/
fieldset.button-group input {
grid-column-start: 2;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<fieldset>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
</fieldset>
<!--RADIO--->
<fieldset class="button-group">
<label>Size of print:</label>
<input id="print_size_199" type="radio" name="print_size" value="10x10">
<label for="print_size_199">10x10 199:-</label>
<input id="print_size_299" type="radio" name="print_size" value="20x20">
<label for="print_size_299">20x20 299:-</label>
<input id="print_size_399" type="radio" name="print_size" value="40x40">
<label for="print_size_399">40x40 399:-</label>
<input id="print_size_599" type="radio" name="print_size" value="80x80">
<label for="print_size_599">80x80 599:-</label>
</fieldset>
<!--CHECKBOX--->
<fieldset class="button-group">
<label>Additional features:</label>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</fieldset>
<!--TEXTAREA--->
<fieldset>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</fieldset>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
I am trying to get my form to center on desktop. It's currently to the left side.
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
The picture below shows the issue and I'll add a snippet and a fiddle to help. Thanks in advance.
Jsfiddle: https://jsfiddle.net/r87h2L6n/
/*********FORMS CSS*************/
form {
display: block;
margin-left: auto;
margin-right: auto;
}
form.contact label {
display: block;
}
span {
display: block;
border: none;
color: white;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
fieldset {
width: 45%;
float: left;
border: none;
}
input.checks {
width: auto;
}
.left {
width: 45%;
float: left;
}
.right {
width: 45%;
float: right;
}
input {
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
}
.bottom {
border: none;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
width: 300px;
}
.fa {
margin-right: 10px;
}
legend {
color: white;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {
background-color: #670809
}
.button:active {
background-color: #670809;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" alt="example web page">
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured” -Papa Smurf
</p>
</section>
</div>
</section>
<div class="center clearfix">
<h1 id="fourth">Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset>
<legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span>
<input name="first_name" type="text" value="" placeholder="First Name" required/>
</label>
<label><span>
</span>
<input name="last_name" type="text" value="" placeholder="Last Name" required/>
</label>
<label><span> </span>
<input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
</label>
<label><span>
</span>
<input type="number" name="quantity" min="1" max="6" placeholder="number of years until next degree">
</label>
<label><span></span>
<input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
</label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset>
<legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information
<hr class="style2">
</legend>
<label><span>
</span>
<input class="ghost-input" name="email" value="" type="email" placeholder="youremail#email.com" autocomplete="off" />
</label>
<label><span></span>
<input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
</label>
<label><span></span>
<input name="website" value="" type="url" placeholder="https://yourwebsite.com" />
</label>
</fieldset>
</section>
<section class="clearfix column">
<fieldset>
<legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests
<hr class="style2">
</legend>
<section class="clearfix column left">
<label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span>
</label>
</section>
<section class="clearfix column left">
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span>
</label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset>
<legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Follow Up
<hr class="style2 toosmall">
</legend>
<section class="clearfix column left">
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span>
</label>
<br>
</div>
</section>
<section class="clearfix column left">
<legend class="smaller">I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span>
</label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit" />
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
To add to Michael_B`s answer your form is set to take up the full width of the page as its a block element by default and you have set it as well. Margin auto only works for elements that are block or inline-block elements and they width of either must be set to a specified value for it to work.
To address your problem now, looking at your source code, you can get the result you expect by removing the float set on your fieldset element in your CSS and setting Margin to auto in that element. I am not sure what the purpose of the float in that CSS rule but you cannot center something that you have set to float. Hope this helps
The reason it's not centering is that your form element is a block level container and, therefore, it's occupying 100% width of the page. As a result, there no space left for centering.
As you wrote:
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
Well, if you give an element display: block it consumes all available horizontal space. Hence, margin-left: auto and margin-right: auto have no effect.
Try defining a width for the form (e.g. width: 30em), removing float rules and/or giving the form text-align: center, which centers the child elements.
It's not your form that is the issue here, it is your fieldset...again. Give this a whirl.
fieldset {
width: 45%;
margin: 0 auto;
/* float: left; -- DELETE float: left if you want this centered */
border: none;
}
UPDATE:
If you also want that submit button to be centered, here is the css for that.
.button {
margin: 0 auto; /* ADDED THIS */
display: block; /* Took inline-block out, just use block */
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
LIVE DEMO
I am styling a Mailchimp form with groups and am having problems with the checkboxes being on one line and the text being on the next in an unordered list. You can see it on this page:
http://www.warmheartspublishing.com/newsletter/
Both the checkbox and text are within the same LI tag, so I don't know why the text is being bumped down below the checkbox. By the way, I'm using the Genesis framework.
Here's the code for the form that I'm putting in Wordpress:
<div id="mailchimp">
<form action="//warmheartspublishing.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&id=fd37fb691f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p style="text-align: center;">Sign up to get news on sales, products, and freebies</p>
<div class="indicates-required" style="font-size: 10px;"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<input type="text" value="First Name" name="FNAME" class="" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div class="mc-field-group">
<input type="text" value="Last Name" name="LNAME" class="" id="mce-LNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div class="mc-field-group">
<input type="email" value="E-mail Address *" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div class="mc-field-group input-group">
<p>What areas are you interested in? </p>
<ul><li><input type="checkbox" value="1" name="group[2381][1]" id="mce-group[2381]-2381-0"><label for="mce-group[2381]-2381-0">Early Learning</label></li>
<li><input type="checkbox" value="2" name="group[2381][2]" id="mce-group[2381]-2381-1"><label for="mce-group[2381]-2381-1">Kindergarten</label></li>
<li><input type="checkbox" value="4" name="group[2381][4]" id="mce-group[2381]-2381-2"><label for="mce-group[2381]-2381-2">Grades 1 - 3</label></li>
<li><input type="checkbox" value="8" name="group[2381][8]" id="mce-group[2381]-2381-3"><label for="mce-group[2381]-2381-3">Grades 4 - 6</label></li>
<li><input type="checkbox" value="16" name="group[2381][16]" id="mce-group[2381]-2381-4"><label for="mce-group[2381]-2381-4">Grades 7 - 8</label></li>
<li><input type="checkbox" value="32" name="group[2381][32]" id="mce-group[2381]-2381-5"><label for="mce-group[2381]-2381-5">Grades 9 - 12</label></li>
<li><input type="checkbox" value="64" name="group[2381][64]" id="mce-group[2381]-2381-6"><label for="mce-group[2381]-2381-6">Language Arts</label></li>
<li><input type="checkbox" value="128" name="group[2381][128]" id="mce-group[2381]-2381-7"><label for="mce-group[2381]-2381-7">Math</label></li>
<li><input type="checkbox" value="256" name="group[2381][256]" id="mce-group[2381]-2381-8"><label for="mce-group[2381]-2381-8">Science</label></li>
<li><input type="checkbox" value="512" name="group[2381][512]" id="mce-group[2381]-2381-9"><label for="mce-group[2381]-2381-9">History & Geography</label></li>
<li><input type="checkbox" value="1024" name="group[2381][1024]" id="mce-group[2381]-2381-10"><label for="mce-group[2381]-2381-10">Foreign Language</label></li>
<li><input type="checkbox" value="2048" name="group[2381][2048]" id="mce-group[2381]-2381-11"><label for="mce-group[2381]-2381-11">Music & Drama</label></li>
<li><input type="checkbox" value="4096" name="group[2381][4096]" id="mce-group[2381]-2381-12"><label for="mce-group[2381]-2381-12">Visual Arts</label></li>
<li><input type="checkbox" value="8192" name="group[2381][8192]" id="mce-group[2381]-2381-13"><label for="mce-group[2381]-2381-13">Phy. Ed. & Health</label></li>
<li><input type="checkbox" value="16384" name="group[2381][16384]" id="mce-group[2381]-2381-14"><label for="mce-group[2381]-2381-14">Religious</label></li>
<li><input type="checkbox" value="32768" name="group[2381][32768]" id="mce-group[2381]-2381-15"><label for="mce-group[2381]-2381-15">Everything</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_74d56fdb848e8be499cc4df0e_fd37fb691f" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
<p style="font-size: 12px;">We respect your privacy</p>
</form>
</div>
Here's the CSS setup for the Mailchimp form:
#mailchimp {
background: #ffffff;
color: #F23D4F;
padding: 20px 15px;
border-style: solid;
border-color: #F23D4F;
width: 335px;
}
#mailchimp input {
border-style: solid;
border-width: 1px;
border-color: #F23D4F;
margin-bottom: 10px;
padding: 8px 10px;
width: 300px;
background-color: #FFFFFF;
color: #000;
font-size: 10px;
}
#mailchimp input[type="submit"] {
background: #F23D4F;
color: #fff;
border-style: solid;
border-color: #F23D4F;
cursor: pointer;
font-size: 15px;
width: 35%;
padding: 8px 0;
}
#mailchimp input[type="submit"]:hover {
color: #F23D4F;
background: #ffffff;
border-style: solid;
border-color: #F23D4F;
}
#mailchimp div.mc-field-group.input-group ul li {
list-style-type: none;
}
Here's a picture of what it's doing.
You change this CSS rule
#mailchimp div.mc-field-group.input-group ul li {
list-style-type: none;
white-space: nowrap; /* added */
}
I am having some difficulty with the compatibility of my CSS for the HTML check boxes. For some versions of IE as well as when I place the live html into my PowerPoint, the center div will overlap with the left and the entire page is shifted left. I am not quite sure why this occurs.
html,
body {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
#googleMap {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
.Title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
#left_check {
position: absolute;
left: 10%;
}
#padded-left {
position: absolute;
padding-left: 1.4em;
}
#right_check {
float: right;
}
#mid_check {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#left_align {
display: inline-block;
text-align: left;
}
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
Original CSS (Problems with some pc IE)
With Flex
IE Problems (new)
This is how you can do it, if I got your question right.
ul {
display: flex;
padding: 0px !important;
}
ul > div {
/* width: 30%; */
flex-grow: 1;
}
ul > div#right_check {
order: 3;
}
ul > div#mid_check {
order: 2;
}
ul > div#left_check {
order: 1;
}
div#mid_check li {
text-align: center;
}
div#right_check li form,
div#mid_check li form {
text-align: left;
}
div#right_check li {
text-align: right;
}
form {
height: 39px;
width: auto;
display: inline-block;
}
#map-canvas {
height: 500px;
width: 100%;
background: #AFAFAF;
}
div.frame {
width: 80%;
margin: auto;
}
<div class='frame'>
<div id="map-canvas"></div>
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
</div>
Is this what you trying to get?