I have a dialog that will display the orders of my site, along with the contents of each. Each order has its own box. I'm having problems getting the divs formatted to show the maximum number of boxes in a row.
This jsfiddle shows the problem. As you can see, the boxes are squeezed into one row and the rows in each box break to a new line, which I don't want.
I have the widths set in the css and dialog code but what I really want is a dialog that opens to the full width, or maybe 90%, of the main page.
Would someone please point out my mistakes?
<style>
.test-container {
display: -webkit-flex;
display: flex;
-webkit-reorder-direction: row-reverse;
reorder-direction: row-reverse;
width: 600px;
height: auto;
background-color: lightgrey;
}
.test-item {
background-color: cornflowerblue;
width: 33%;
margin: 10px;
}
</style>
$(document).ready(function() {
$("div").dialog({
modal: true,
title: "My Dialog",
minHeight: 100,
minWidth: 200,
maxWidth: 500,
maxHeight: 250,
});
});
<div class="test-container">
<div class="test-item">Ordered On: 11/19/2014
<div><input name="qty_0" value="1" type="hidden">
<input name="attr_0" type="hidden">
<input name="pid_0" value="788" id="ck_0" type="checkbox"> <label for="ck_0">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 10/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 11/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 08/27/2015
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
</div>
An initial setting on flex items is flex-shrink: 1. This means that flex items will shrink to avoid overflowing the container. That's why your lines of text of wrapping. To see what I'm talking about, add flex-shrink: 0 to your .test-item elements. revised demo 1
What you may be looking for is to have the space in the container distributed evenly across items. Consider also releasing the width limitation on the container. revised demo 2, revised demo 3
Related
Given the following structure:
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<label>Select:</label>
<div id="id_select">
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
</div>
<input type="submit">
</form>
without modifying the html and assuming the number of check boxes is somewhat dynamic.
Can this be rendered sensibly in two columns:
input fields fill one column after another
with labels above each input within one row
height of items on one column independent of those in the other column.
I understand this is trivial if I had a container for the tags of each column, but I want to understand if/how it is possible to achieve without.
With grid layout, I come close, but I the number of checkboxes will influence the height of the input fields / labels on the left.
With columns / column-count I can't seem to find a way to control the break.
Note: The reason I don't want to modify the html is mostly because the framework I'm using (Django) does make it rather intrusive to mess with form rendering. Moreover, this specific layout is only for certain screen sizes. I dislike tuning the html with different responsive layouting in mind. I am willing to accept some additional complexity in the CSS in this case, and want to figure out if this is feasible.
The grid display could help you.
defaut will draw a single column, unless you specify an element to stand in another column.
If you use ID , you may work something out wherever IDs are found or not.
Example with your form , with and without IDS , both are a form{display:grid;}
/* defaut layout as a grid of one column , gap can be used */
form {
display:grid;
gap:0.5em;
padding:0.5em;
border:solid;
margin:1em;
}
/* element dispatched inside grid-column:2 , will make form draw 2 columns */
#id_select {
grid-column:2;
grid-row:2 / 6;
display:grid;
}
#label_select{grid-row:1;}
#id_select ~input[type="submit"] {
grid-row:6;
}
#label_select,
#id_select ~input[type="submit"] {
grid-column:2;
}
<h1>I'll be 2 columns !</h1>
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<label id="label_select">Select:</label>
<div id="id_select">
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
</div>
<input type="submit">
</form>
<h2>I'll be a single column</h2>
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<label>Select:</label>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<input type="submit">
</form>
Another option can be to use behaviors of the table layout and put label and inputs inside the box.
Below example:
/* defaut layout as a table of one column , border-spacing can be used */
form {
display:table;
position:relative;
width:90%;
border:solid;
margin:1em;
border-spacing:.5em;
}
form>label,form>input {display:block;width:95%}
#id_select {
display:table-cell;
padding-bottom:2em;
width:50%;
padding-inline-start:0.5em;
border-inline-start:double;
}
#id_select ~ input[type="submit"] {
position:absolute;
bottom:1em;
left:50%;
right:0;
}
input[type="submit"] {
margin:auto;
width:auto;
}
<h1>I'll be 2 columns !</h1>
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<div id="id_select">
<label id="label_select">Select:</label>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
</div>
<input type="submit">
</form>
<h2>I'll be a single column</h2>
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<label>Select:</label>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<input type="submit">
</form>
What I’d do is put the #id_select in a absolutely positioned block on the right top, which would prevent it from affecting the height of the main content with labels+inputs.
form {
position: relative;
padding-right: 100px;
/* make space for the #id_select block */
}
label,
input {
display: block;
/* make them fill in width to go one after another vertically */
}
#id_select {
position: absolute;
right: 0;
top: 0;
width: 100px;
}
<form>
<label for="id_foo">Foo:</label>
<input type="text" name="foo" required="" id="id_foo">
<label for="id_bar">Bar:</label>
<input type="text" name="bar" required="" id="id_bar">
<label for="id_baz">Baz:</label>
<input type="text" name="baz" required="" id="id_baz">
<label>Select:</label>
<div id="id_select">
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
<div><input type="checkbox"><label>Test</label></div>
</div>
<input type="submit">
</form>
I have a code like this:
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
And here is jsfiddle - https://jsfiddle.net/k96x02qL/
So as you see, for some values of width of the main div, sometimes there is a situation, when label is on a new line, but radiobutton is not (picture one):
picture one
So i want to see something like this (with any value of width of main div) (picture two):
picture two
How can i implement it? For some reason i can't wrap input and it's label in one more div. Only can add some styles using "name" html attribute or something like this...
You can do this without changing the HTML by not showing the input button (opacity: 0) and putting a 'pretend' button in a pseudo element before each label.
This snippet uses a couple of Unicode circles to do this but of course you may want to do it another way - e.g. a background radio gradient or an image.
This way the label as a whole goes across whole if there isn't room for it at the end of a line.
input {
opacity: 0;
position: absolute;
left: 50px
}
input:checked+label::before {
content: '\26ab';
}
label {
position: relative;
}
label::before {
content: '\26aa';
margin-right: 5px;
position: relative;
}
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
You can use nested label/component to frame the radio component as a single box, after that add flex layout to styled the main container (div with class .days) with flex-wrap: wrap css property to auto add line break when content is bigger than container width:
.days {
display:flex;
flex-wrap: wrap;
}
<div class="days" style="width:300px;">
<label for="monday">
<input id="monday" type="radio" name="monday" value="1"> monday
</label>
<label for="tuesday">
<input id="tuesday" type="radio" name="tuesday" value="2"> tuesday
</label>
<label for="wednesday">
<input id="wednesday" type="radio" name="wednesday" value="3"> wednesday
</label>
<label for="thursday">
<input id="thursday" type="radio" name="thursday" value="4"> thursday
</label>
</div>
<br/>
Variant for your case:
<div class="days" style="width:300px;">
<div>
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
</div>
<div>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
</div>
<div>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
</div>
<div>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
</div>
I'm just learning how forms, inputs, and fieldsets are working, so I'm trying to make replicate the image above with my own code. So far, I have been able to figure out most of it, but I don't know how to properly put the button in line with the bottom of the third div. I tried a span tag with vertical-align: bottom, but that did not work. Also, I tried to make a div and use vertical-align bottom, which didn't work either. I think I just have a poor understanding of vertical-align, so if you could help it would be greatly appreciated.
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="float: left;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
3 issues:
1: you were missing a " on your body tag
2: when you use float:left you take the element out of the flow of the dom. In this case it's better to use display:inline-block
3: add display:block, margin-left: your a tag
NOTE: your form looks pretty good.
a{
display:inline-block;
margin-left:10px;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="display:inline-block;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
But a better way is to use flex:
#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div id='container'>
<div >Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div > Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div> Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button> </div>
</fieldset>
</form>
</body>
You should use label tags here for all your field label.
Each radio button list should also bee in it's own fieldset
Also don't use tags like br or elements like for spacing, user margin or padding instead.
Let's now encapsulate the radio buttons and the labels in a label tag. That will help up align the link. Don't use a button in a link, it's invalid HTML and can result in odd behavior. Instead, style the link appropriately, I'd keep it looking like a link as it is an actual link to an external site opening in a new tab.
body {
background-color: #EEEEEE
}
.flex {
display:flex;
}
label.wide {
padding-right: 1em;
}
label {
white-space:nowrap;
padding-bottom:0.5em;
display:inline-block;
}
fieldset fieldset {
border: none;
padding-bottom:0;
}
#paymentShippingFields fieldset label {
display: block;
padding-bottom:0;
}
#paymentShippingFields fieldset {
border:none;
width:33%;
}
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
<fieldset id="nameField">
<label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
<label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
</fieldset>
<fieldset id="addressField">
<label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
<label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
<label>City: <input type="text" name="city" placeholder="York"></label>
<label>Zip: <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>
</fieldset>
</fieldset>
<fieldset style="width: 750px;" id="paymentShippingFields">
<legend>Payment and Shipping</legend>
<div class="flex">
<fieldset>
<legend>Payment:</legend>
<label><input type="radio" name="payment" value="Visa">Visa</label>
<label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
<label><input type="radio" name="payment" value="Paypal">Paypal</label>
</fieldset>
<fieldset>
<legend>Shipping:</legend>
<label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
<label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
<label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
</fieldset>
<fieldset>
<legend>Discounts:</legend>
<label><input type="checkbox" name="discounts" value="AAA">AAA</label>
<label><input type="checkbox" name="discounts" value="AARP">AARP</label>
<label>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
Join Now!
</label>
</fieldset>
</div>
</fieldset>
</form>
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.
Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}
It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird
Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>