So I've just started to learn HTLM and CSS, so to learn I'm just going trough some easy to do examples. But I'm stuck on getting the checkbox to align with the texts I want to align it to.
The example I'm following
And this is how mine looks at the moment:
My copy of the example
As you can see it's not an exact copy of the example and I've tried for some hours now but can't figure it out.
This is my code:
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display: flex;
}
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<label for="ringnes-ronny">Ringnes-Ronny</label>
<label><input type="checkbox">Polisen</label>
<label>59 SEK</label>
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</p>
I'm sorry if the code is sloppy, haven't figured out the whole structure yet but I hope its readable.
I've tried to change the display of the .checkbox but none of them does what I would want.
Tried the align and vertical-align but they don't move at all.
Looks like you had a pretty good start on it. I would put the items that I want to be beside each other into a flexbox, and I just moved the labels around so they would be where they are in the example that your following.
display: flex Is super powerful, I HIGHLY reccommend playing flexbox froggy to get a bit more comfortable with it in a fun and engaging way.
Another great tool that is used often to display thing how you want is display: grid and there is an online game for that one as well called grid garden.
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display:flex;
}
.flex {
display: flex;
justify-content: space-between;
padding-left: 4em;
}
<!DOCTYPE html>
<html>
<head>
<title> Lab1 </title>
</head>
<body>
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label >59 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
</div>
<label for="ringnes-ronny">Ringnes-Ronny</label>
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</div>
</p>
</body>
</html>
maybe that...
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
#my-form > label {
display : block;
width : 24rem;
min-height : 2.5rem;
font-size : .9rem;
line-height : 2rem;
}
#my-form > label input[type=text],
#my-form > label select,
#my-form > label textarea {
font-size : 1rem;
float : right;
box-sizing : border-box;
width : 18rem;
}
#my-form > h3 {
margin : 2.5rem 0 0 0;
}
#my-form > fieldset {
display : grid;
grid-template-columns : 8rem 16rem;
border : none;
margin : 0;
padding : 0;
font-size : 1rem;
}
#my-form > fieldset legend {
transform: translateY(2rem);
}
#my-form > fieldset label {
grid-column : 2;
}
#my-form > fieldset label span {
float : right;
}
<form id="my-form">
<label>
* Förnamn:
<input name="förnamn" type="text">
</label>
<label>
* Efternamn:
<input name="efternamn" type="text">
</label>
<label>
* Adress:
<input name="adress" type="text">
</label>
<label>
* E-post:
<input name="e-post" type="text">
</label>
<label>
Ålder:
<select name="ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</label>
<label>
Meddelande:
<textarea name="meddelande" id="meddelande" rows="2"></textarea>
</label>
<h3> Välj låtar och media: </h3>
<fieldset>
<legend> Ringnes-Ronny </legend>
<label>
<input type="checkbox" name="Polisen" value="59">
Polisen
<span>59 SEK</span>
</label>
<label>
<input type="checkbox" name="Valhalla" value="39">
Valhalla
<span>39 SEK</span>
</label>
<label>
<input type="checkbox" name="Polisen" value="49">
Raggare pä stureplan
<span>49 SEK</span>
</label>
<label>
<input type="checkbox" name="Monster" value="39">
Monster
<span>39 SEK</span>
</label>
</fieldset>
</form>
Based on the image supplied try the following. I've replaced p with a fieldset as this is what a collection of check boxes is.
.checkbox {
/*Remove the border from the fieldset*/
border: 0;
/*Flex disply*/
display:flex;
/*Start aligning to the left*/
justify-content: flex-start;
/*Vertical align center*/
align-items: center;
}
.title {padding-right:1em;}
.boxContainer {
/*Give the container some width*/
min-width:40vw;
}
.checkbox label {
/*Set labels to display be block elements*/
display: block;
/*Position relative so child elements are postions relative to this object*/
position: relative;
/*A little spacing*/
margin-bottom: 0.25em;
/*Give us some min width*/
min-width:40vw;
}
.checkbox label input {
/*A litle more spacing*/
margin-right: 0.5em;
}
.checkbox .time {
/*Set our time elements to be absolutely positioned*/
position: absolute;
/*THen move them to the right.*/
right: 0
}
<fieldset class="checkbox">
<div class="title">Ringnes-Ronny</div>
<div class="boxContainer">
<label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
<label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
<label><input type="checkbox">Polisen<span class="time">49 SEK</span></label>
<label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
</div>
</fieldset>
Related
I am trying to align my form contents so that each label falls on a separate line and the input content within the label falls in separate lines after the label element. Please help. I included an image link and my code in this question.
I would like my label to be displayed above the input elements, the input elements to have centered content (for example: radio type inputs to be aligned perfectly centered with their relative text description. If I have "male" as an option for a radio, I would like the input button itself to be aligned centered and even with the words "male").
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: block;
}
div {
display: block;
}
.form-group {
margin: 0 auto;
}
.container {
max-width: 600px;
margin: auto;
}
form {
height: 100%;
width: 100%;
display: block;
}
label {
padding: 0.25rem;
display: flex;
width: 100%;
}
input[type="radio"],
label {
align-items: center;
}
input {
width: 100%;
display: block;
}
<body>
<div class="container" style="text-align: center;">
<h1 id="title">Studentas Survey Form</h1>
<p id="description">Thank you for taking time to complete this survey</p>
</div>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label">Enter your name
<input type="text" id="name" placeholder="Enter your name" required></input>
</label>
<label id="email-label">Enter your Email
<input type="email" id="email" placeholder="Enter your email" required></input>
</label>
<label id="number-label">Enter your age
<input type="number" id="number" min="1" max="99" placeholder="Age" required></input>
</label>
<label>Favorite subject?
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">History</option>
<option value="2">Math</option>
<option value="3">Science</option>
<option value="4">English</option>
</select>
<label>
<label>What is your gender?
<input type="radio" name="gender" required>Male</label>
<input type="radio" name="gender" required>Female</label>
</label>
<label>What do you like about school?
<input type="checkbox" value="lunch" required>Lunch Time</input>
<input type="checkbox" value="social" required>Social Interaction</input>
<input type="checkbox" value="work" required>Course Work</input>
<input type="checkbox" value="home" required>Going Home</input>
</label>
<label>What are your thoughts on this survey?
<textarea></textarea>
</label>
<input type="submit"></input>
</div>
</form>
</div>
</body>
Check this out!
.Your-choosen-label
{
display:flex;
justify-content:space-evenly;
align-items:center;
flex-direction:column;
}
I think it is my HTML which is formatted wrong, but I'm not sure. I am trying to center the form to start with using flexbox but nothing seems to be happening. Must I apply flex to each form section, that seems to defeat the purpose of using a flex wrapper in the first place? The input tags shouldn't need id selectors if they are wrapped within label tags surely?
My HTML Code:
<!--The HTML below is where I think the issue is, I started this project on myFreeCodeCamp and at the time they wanted me to have id selectors for both
the label and the input tags. I feel these selectors might be conflicting?-->
<!--Flex Wrapper-->
<div id="wrapper">
<!--Form-->
<form id='survey-form'>
<!--Name Label-->
<label id='name-label'>Name
<input id='name' type="text" name='first-name' placeholder='Enter your name'required/>
</label>
<!--Email Label-->
<label id='email-label'>Email <input id='email' type="email" name='email' placeholder='Enter your email' pattern='[a-z]{0-9}'required/></label>
<!--Age Label-->
<label id='number-label'>Age (optional) <input id='number' type='number' name='age' placeholder='Enter your age' pattern='{0-9}' min='16' max='120'/></label>
<!--Dropdown Menu-->
<p id="dropdown-title"> What is your favourite feature of freeCodeCamp?</p>
<select id='dropdown'>
<option>Select an option</option>
<option>Projects</option>
<option>Challenges</option>
<option>Community</option>
<option>Open Source</option>
</select>
</label>
<!--Radio Button Menu-->
<p id="radio-title">Would you recommend freeCodeCamp to a friend?</p>
<label><input type='radio' name='radio' value='answer'> Definitely</label>
<label><input type='radio' name='radio' value='answer'> Maybe</label>
<label><input type='radio' name='radio' value='answer'> Not sure</label>
<!--Checkbox Menu-->
<label id="checkbox-title">What would you see improved? (Check all that apply)</label>
<label><input type='checkbox' value='attribute'>Front-end projects</label>
<label><input type='checkbox' value='attribute'>Back-end projects</label>
<label><input type='checkbox' value='attribute'>Data Visualisation</label>
<label><input type='checkbox' value='attribute'>Challenges</label>
<label id="textarea-title">Any further comments or suggestions? <textarea placeholder='Additional comments'></textarea></label>
<!--Submit Button-->
<label id="submit-button"> <input id="submit" type='submit'></label>
</div>
</form>
</div>
My CSS Code:
/*My attempt at using Flexbox to style a survey form*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
border-radius: 0.2em;
}
body {
background-color: #383836;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2 {
color: white;
text-align: center;
margin: 10px;
}
/*Flex Wrapper*/
#wrapper {
display: flex;
background-color: darkgrey;
max-width: 700px;
height: 100vh;
justify-content: center;
align-items: center;
}
/*Form ID Selector*/
#survey-form {
flex: 1;
font-size: 20px;
font-weight: 400;
color: white;
border: none;
border-radius: 0.2em;
}
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 have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Essentially I'm trying to float, most of the list item elements horizontally with with the input underneath the label. Here is a template of what I'm trying to achieve.
I've included some of the code here:
<div>
<label for="headline">Headline: </label>
<input type="text" name="headline" value="Milestone" maxlength="50"size="55">
<br>
<div class="dates clearfix">
<label for="effect_date">Date of Effect:</label>
<input type="text" name="effect_date">
<label for="end_date">End Date (opt):</label>
<input type="text" name="end_date">
<label>Date Visible:</label>
<input type="radio" name="is_date_visible" value="2012">
<label for="is_date_visible_yes">Yes</label>
<input type="radio" name="is_date_visible">
<label for="is_date_visible_no">No</label>
<br>
<label>Administrative:</label>
<input type="radio" name="is_adminis" value="1">
<label for="is_admin_yes">Yes</label>
<input type="radio" name="is_adminis">
<label for="is_admin_no">No</label>
</div>
</div>
And the CSS:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div.dates {
}
.dates label {
display: block;
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates label, .dates input {
float: left;
}
I've tried various things with the CSS all to no avail. Essentially I can't get the inputs to drop below the labels and I can't line them all up they usually come out staggered from the top.
I also have a fiddle link I've been working on:
http://jsfiddle.net/vjDEq/
Thanks for any help.
Here's something similar, without using floats:
http://jsfiddle.net/vjDEq/19/
HTML
<div>
<label for="headline">Headline: </label>
<input type="text" id="headline" name="headline" value="Milestone" maxlength="50"size="55">
</div>
<div class="dates">
<label for="effect_date">Date of Effect:
<input type="text" name="effect_date">
</label>
<label for="end_date">End Date (opt):
<input type="text" name="end_date">
</label>
<fieldset>
<legend>Date Visible:</legend>
<label for="is_date_visible_yes">
<input type="radio" name="is_date_visible" id="is_date_visible_yes" value="yes">
Yes
</label>
<label for="is_date_visible_no">
<input type="radio" name="is_date_visible" id="is_date_visible_no" value="no">
No
</label>
</fieldset>
<fieldset>
<legend>Administrative:</legend>
<label for="is_admin_yes">
<input type="radio" name="is_adminis" id="is_admin_yes" value="1">
Yes
</label>
<label for="is_admin_no">
<input type="radio" name="is_adminis" id="is_admin_no" value="0">
No
</label>
</fieldset>
</div>
CSS
#headline {
margin-bottom: 1em;
}
label {display: block;}
.dates label {
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates fieldset input {
display: inline;
}
.dates label, .dates fieldset {
display: inline-block;
margin-right: 2em;
}
.dates fieldset label {
margin-right: 1em;
}
Instead of floats, the labels wrap the inputs and are set to inline-block. The radio buttons should be in a fieldset. Note that jsfiddle is adding normalize.css, which removes borders/margins/padding from the fieldset and legend. You have the option of floating the Administrative fieldset to the right if your layout demands it.