need help with vertical alignment of span, a simple two column css for div with a label and span, align the text in span bottom, when label splits into 2 rows.
CSS
div.form label {
width: 200px;
float: left;
text-align: right;
margin-right: .5em;
display: block;
}
Snippet
div.form label {
width: 200px;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
<div class="form" style="padding-top: 5px; padding-bottom: 25px; padding-left: 5px; ">
<div>
<label style="width: 200px;">Fiscal Period of 2018 End Date:</label> <span style="vertical-align: bottom; display:">08/31/1998</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">Type of Circular A-133 OMB Audit:</label> <span style="vertical-align: bottom; position: absolute;">S</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">Audit Period Covered:</label> <span>A</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">If Audit Period Other, Number of months:</label> <span tyle="vertical-align: bottom; ">4</span>
</div>
</div>
</body>
<html>
simply set label as inline-block , and remove float:left
.form label {
width: 200px;
text-align: right;
margin-right: 0.5em;
display: inline-block
}
<div class="form">
<div>
<label>Fiscal Period of 2018 End Date:</label> <span>08/31/1998</span>
</div>
<div>
<label>Type of Circular A-133 OMB Audit:</label> <span>S</span>
</div>
<div>
<label>Audit Period Covered:</label> <span>A</span>
</div>
<div>
<label>If Audit Period Other, Number of months:</label> <span>4</span>
</div>
</div>
Use CSS Tables
.form div {
display: table;
table-layout: fixed;
}
.form div > label {
display: table-cell;
width: 200px;
text-align: right;
padding-right: .5em;
}
.form div span {
display: table-cell;
vertical-align: bottom;
}
<div class="form" style="padding-top: 5px; padding-bottom: 25px; padding-left: 5px; ">
<div>
<label>Fiscal Period of 2018 End Date:</label>
<span>08/31/1998</span>
</div>
<div>
<label>Type of Circular A-133 OMB Audit:</label>
<span>S</span>
</div>
<div>
<label>Audit Period Covered:</label>
<span>A</span>
</div>
<div>
<label>If Audit Period Other, Number of months:</label>
<span>4</span>
</div>
</div>
OR
Flexbox
.form div {
display: flex;
align-items: flex-end;
}
.form div label {
flex: 0 0 200px;
text-align: right;
padding-right: .5em;
}
<div class="form" style="padding-top: 5px; padding-bottom: 25px; padding-left: 5px; ">
<div>
<label>Fiscal Period of 2018 End Date:</label>
<span>08/31/1998</span>
</div>
<div>
<label>Type of Circular A-133 OMB Audit:</label>
<span>S</span>
</div>
<div>
<label>Audit Period Covered:</label>
<span>A</span>
</div>
<div>
<label>If Audit Period Other, Number of months:</label>
<span>4</span>
</div>
</div>
Related
I've been trying to a series of input boxes to be inline but also to be responsive such that it does not get overlapped on the row below.
When shrinking the contents gets overlayed on top of div directly below and not sure how to fix this
/** Editable **/
.container {
display: block;
margin: auto;
}
/** Not editable onwards **/
.multiple-choice--small {
height: 24px;
padding: 2px 10px 0 36px;
}
.full {
float: left;
width: 100%;
}
.quarter,
.one-quarter {
float: left;
width: 25%;
}
.third,
.one-third {
float: left;
width: 33.33333%;
}
.form-group {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
margin-bottom: 15px;
}
input[type=number] {
-moz-appearance: textfield;
}
.form-date .form-group {
float: left;
width: 50px;
margin-right: 20px;
margin-bottom: 0;
clear: none;
}
.form-date .form-group label {
display: block;
padding-bottom: 2px;
}
.form-date .form-group input {
max-width: 100%;
}
.form-date .form-group-year {
width: 70px;
}
.form-group-error {
margin-right: 15px;
border-left: 4px solid #b10e1e;
padding-left: 10px;
}
#media (min-width: 641px) {
.form-group-error {
border-left: 5px solid #b10e1e;
padding-left: 15px;
}
}
.form-control-error {
border: 4px solid #b10e1e;
}
.error-message {
font-family: "nta", Arial, sans-serif;
font-weight: 700;
text-transform: none;
font-size: 16px;
line-height: 1.25;
color: #b10e1e;
display: block;
clear: both;
margin: 0;
padding: 2px 0;
}
<div class="container">
<div class="full" style="padding-top:10px;">
<div class="one-quarter"><span style="font-weight:bold"> t </span></div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<label> Input A </label>
<div class="form-group">
<div class="form-date" >
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control">
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control" >
</div>
</div>
</div>
</span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<div> Input B </div>
<div class="form-group" >
<div class="form-date" style="background: blue;">
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control">
</div>
</div>
</div>
</span>
</div>
</div>
<div class="full">
<div class="one-quarter"> </div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio A</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio B</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
</div>
</div>
Full screen:
Responsive:
Edit: Added JSFiddle: https://jsfiddle.net/Ducking/0n8cdvtx/13/
Use the flex property on the dates class.
I've got three div's going here. One's a container then the other 2 are in place for some buttons! But it just doesn't look right. I'm not quite sure how to fix it
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
HTML:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left; padding-left: 325px;">
<p style="padding-left: 72px;">Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: left; padding-left: 125px;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/3ar1L0zy/1/
And what i'm trying to achieve in paint form!
I would move away from using floats - css has moved on sufficiently so you shouldn't need to use them anymore.
Use flex instead:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
width: 100%; /* you don't really need this - divs are block elements which are 100% by default */
background-color: #e4e4e4;
padding: 0 20px 5px 20px;
box-sizing: border-box; /* as you have set the width, you need this to stop the div being 100% + 40px wide */
display:flex; /* this will align items in a row by default */
flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
justify-content:space-between; /* this will push any content to either side of the row */
}
.divButton > p {
width:100%; /* make this take up full row */
}
.divButton > div {
text-align:center; /* use this to centre text - not padding */
}
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div>
<p>Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<p>TEXT</p>
<button class="button">TEXT</button>
</div>
</div>
One other tip I would give you is try not to use inline styles - they become very hard to maintain and make it harder to debug too (and cause a lot larger files as you have to repeat code for styles instead of just using a class that can be used multiple times but programmed once)
Instead of use float: left on both div, you can use float right on the right one and remove the padding-left you set:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left;">
<p style="padding-left: 72px;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: right;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/13/
you can achieve this too by using flexbox too. (better solution in my opinon)
HTML code:
<div class="divButton">
<h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
<!--2 buttons "centered"-->
<div class="divText">
<p style="padding-left: 72px;">TEXT</p>
<p style="padding-left: 40px;">TEXT</p>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<div class="divButtons">
<div>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<button class="button">TEXT</button>
</div>
</div>
</div>
CSS code:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #880002;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
.divText {
display: flex;
justify-content: space-around;
}
.divButtons {
display: flex;
justify-content: space-around;
}
<div class="divButton" style="text-align: center;">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<div style="display: inline-block;">
<!--add spacing to move away from 2 buttons-->
<div style="float: right; display: inline-block; padding-left: 125px;">
<p style="text-align: center;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
<!--2 buttons "centered"-->
<div style="display: inline-block;">
<p style="text-align: center;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/85/
I would recommend flexbox
.parent{
background: tomato;
width: 400px;
padding: 30px;
display: flex;
flex-direction: column;
}
.header{
background: yellow;
text-align: center
}
.body{
background: green;
width: 100%;
display: flex;
}
.body-item{
background: pink;
width: 50%;
text-align: center;
padding: 10px;
}
.blue{
background: blue; /* to make it easier to see */
}
.buttons{
display: flex;
flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
<h3 class="header">HEADER TEXT</h3>
<section class="body">
<div class="body-item">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="body-item blue">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
</div>
</div>
</section>
</div>
I have a sidebar with Facett-Checkboxes.
The width of the sidebar can change and is not under my control.
I want to have a checkbox, a description and the result count in one line for saving space.
The the count should be right aligned inside sidebar, the checkbox left. The description should take the remaining space with overflow: ellipsis for accessibility.
The solution is preferred with css only. If not possible also js could be used.
For exemple code see https://jsfiddle.net/z9d8qjsb/7/
html
<div class="sidebar_a">
<div class="row">
<input id="ckb" type="checkbox" />
<label for="ckb">
<span class="text">Description that can be verry long and should use ellipsis</span>
<span class="count">(xxxx)</span>
</label>
</div>
<div class="row">
<input id="ckb" type="checkbox" />
<label for="ckb">
<span class="text">Short Desc.</span>
<span class="count">(xxxx)</span>
</label>
</div>
</div>
<div class="sidebar_b">
<div class="row">
<input id="ckb" type="checkbox" />
<label for="ckb">
<span class="text">Description that can be verry long and should use ellipsis</span>
<span class="count">(xxxx)</span>
</label>
</div>
<div class="row">
<input id="ckb" type="checkbox" />
<label for="ckb">
<span class="text">Short Desc.</span>
<span class="count">(xxxx)</span>
</label>
</div>
</div>
css
.sidebar_a {
width: 500px;
}
.sidebar_b {
width: 100px;
}
.sidebar_a, .sidebar_b {
border: 2px solid black; /*only for illustration*/
}
.row {
position: relative;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
width: 70%;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.count {
position: absolute;
}
UPDATE: html updated for better explanation.
.sidebar {
// width: 200px;
border;
2px solid black;
position: relative;
}
.row {
position: relative;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
white-space: nowrap;
width: 200px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.count {
right: 5px;
position: absolute;
}
#ckb {
float: left;
width: auto;
margin-top:6px;
}
label {
float: left;
width: auto;
position: relative;
width: 300px;
}
<div class="sidebar">
<div class="row">
<input id="ckb" type="checkbox" />
<label for="ckb">
<span class="text">Description that can be verry long and should use ellipsis</span>
<span class="count">(xxxx)</span>
</label>
</div>
</div>
You can do like this
.count {
right: -5px;
position: absolute;
}
I change the right properties in minus i think its work for you
I want to achieve this layout:
*********
* Image * Price | Add-to-cart-icon | Amount
*********
But as you can see in this fiddle, the order of "Price | Add-to-cart-icon | Amount" is "Add-to-cart-icon | Amount | Price". Why is this happening and how can I achieve the pursued layout?
Maybe it is better to align elements by using display: inline?
My HTML-Code:
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
My CSS:
.views-column {
position: relative;
clear: both;
padding-top: 1em;
}
.views-column img {
float: left;
max-width: 35%;
height: auto;
padding-right: 1em;
}
.feldgruppe,
.commerce-add-to-cart {
float: left;
}
input.form-submit {
float: left;
max-width: 30px;
}
.form-item-quantity {
float: left;
}
If you want to use float for all, you should wrap the price text into a div or span and float it to the left too. But I suggest to use inline blocks instead of float, so less CSS is needed.
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
jsFiddle
.views-column {
position: relative;
clear: both;
padding-top: 1em;
/* white-space: nowrap; */
}
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.
The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<img src="image.gif" />
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<img src="image.gif" />
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
jsfiddle
Note
there is not such thing as float:center;