I have a div in the following format
<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>
I am trying to achieve a layout, where all the values are aligned on top of each other to the right and labels to the left within each row.
I have tried using float:left and float:right like
css
#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}
But, this css i tried is missing the layout and row items are colliding into each other. Can someone help what could be the issue?
If you are familiar with how a HTML table works, then you can use display:table-* properties. Btw, use class instead of id. Use id specifically for things such as DOM manipulation or forms. Do not use id for styling unless you have no other choice.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>
<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>
</html>
If I've understood your question right you want to have labels on the left and values on the right just in front of their labels.
Here is example for you http://codepen.io/g1un/pen/PGKEwB
Add to your rows class row and to labels class label and apply the next css to it:
.row::after {
clear: both;
display: table;
content: '';
}
.label {
float: left;
}
And don't apply to your rows display: inline; - it just does harm to your code.
Here's my solution - rather simple, replaced your whole CSS (i.e. no other CSS):
* {
box-sizing: border-box;
margin: 0;
}
div {
border: 1px dotted #fa5;
}
#main > div > div {
display: inline-block;
width: 49.8%;
padding: 10px;
}
Codepen: http://codepen.io/anon/pen/GjvykB
Change the width value to any desired setting < 50%
P.S.: border isn't necessary, used only to visualize the elements, th very last padding also isn't necessary
If you don't need to support older IE browsers, go with flexbox
Side note: Don't use id like that, use class
.main > div {
display: flex;
}
.main > div > div {
margin: 0 10px;
}
<div class="main">
<div class="row1">
<div class="label1">1</div>
<div class="value1">One</div>
</div>
<div class="row2">
<div class="label2">2</div>
<div class="value2">Two</div>
</div>
<div class="row3">
<div class="label3">3</div>
<div class="value3">Three</div>
</div>
</div>
on my opinion - try display: inline-block; I will hope it help you.
Looking through some documentation, it looks like you an try using position for left and right alignment. I would suggest trying out something like in the documentation:
.right {
position: absolute;
right: 0px;
width: 300px;
}
Related
I have two spans within a table cell with content in them that I want to be able to align horizontally independently from each other while staying in the same row.
Currently, I am able to change their alignment together by changing the text-align on the <td> they are within.
I am working on an editor and would like for users to be able to have more robust options for the custom alignment if possible. Any ideas?
Here is a basic codepen and I also have an image describing the positions I would like. Is this possible with tables and basic CSS? I cannot use flex or most modern CSS because it has to be compatible with Outlook and other desktop email clients.
EDIT: Thanks for the responses so far. I did some searching and it looks like both position: absolute and text-align-last have minimal support in outlook. See other SO answers here and here. I think I will be limited to using tables and basic HTML elements. I have updated the title/wording of this post and the codepen to better reflect the problem. Thanks.
Old Codepen
New Codepen
Code from codepen:
<table width=100%>
<tr width=100% valign='bottom'>
<td id='container'>
<span class='first'>Hello!</span>
<span class='second'>World!</span>
</tr>
</table>
#container {
text-align: center;
background-color: gray;
}
.first {
background-color: red;
/* text-align: left; */
}
.second {
background-color: green;
/* text-align: right; */
}
The code works fine to me.
<div id='container'>
<div class='inline first'>Hello!</div>
<div class='inline second'>World!</div>
</div>
<style>
.inline {
display: inline-block;
}
#container {
text-align: center;
}
/* #This doesn't work, what would? This does*/
.first {
position: absolute;
left: 0px;
}
.second {
position: absolute;
right: 0px;
}
</style>
Using position, you can change alignments on the x and y axis. This, for example, works. :)
The adjustment of the two elements to the two sides can be achieved using text-align-last: justify;, the others with regular text-align settings:
.inline {
display: inline-block;
}
.first {
background: red;
}
.second {
background: green;
}
#container1 {
text-align-last: justify;
}
#container2 {
text-align: left;
}
#container3 {
text-align: center;
}
#container4 {
text-align: right;
}
<div id='container1'>
<div class='inline first'>Hello!</div>
<div class='inline second'>World!</div>
</div>
<div id='container2'>
<div class='inline first'>Hello!</div>
<div class='inline second'>World!</div>
</div>
<div id='container3'>
<div class='inline first'>Hello!</div>
<div class='inline second'>World!</div>
</div>
<div id='container4'>
<div class='inline first'>Hello!</div>
<div class='inline second'>World!</div>
</div>
In order to position two images beside each other (i.e. the two images are on the same line), I tried the following code:
<html>
<head>
<style>
#container {
width:100%;
}
img {
display:inline-block;
width:50%;
}
</style>
</head>
<body>
<h1 style="text-align:center"><strong>Test</strong></h1>
<div id="container">
<img src="Google-logo.png">
<img src="Google-logo.png">
</div>
</body>
The width of the container div should be shared equally by the two images, right? However, this does not happen and the images appear on two separate lines.
If, however, I use float:left instead, the images do appear on the same line. Why is this?
Remove the new line between the img tags:
<div>
<img src="..." alt=""><img src="..." alt="">
</div>
This happens because elements which are declared with inline or inline-block are sensitive to whitespace.
More information: on David Walsh's Blog
Commonly layouts are done with floats or flexbox instead.
Floats
/* Clearfix */
.wrapper:after {
content: '';
display: table;
clear: both;
}
.item {
float: left;
width: 50%;
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
Flexbox
.wrapper {
display: flex;
}
.item {
flex: 1; /* Or use width: 50%; */
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
try this code
#container {
max-width:100%;
display:flex;
}
img {
flex:1;
}
Give align property to images.
<img src="Google-logo.png" align="left">
<img src="Google-logo.png" align="left">
https://jsfiddle.net/bt2341yh/
use css float property:
img {
width:50%;
float:left;
}
see fiddle . no need of display.
Images give margins and padding so giving 50% width wont bring them in a line. Try reducing their widths or add float:left.
img{
display: inline-block;
width: 50%;
float: left;
}
According to the above solution it is very difficult to keep the page next to next line content. It will looks like minified version of our code. So try to add font-size:0 on your parent element #container. This will resolve this issue.
#container {
width:100%;
font-size:0;
}
DEMO
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I'm trying to set a button's display property as table-cell but it doesn't behave like one.
Any help would be appreciated.
jsFiddle Demo (The demo contains a fixed container height, but I need it to work without it).
No fixed sizes Demo.
DOM:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<button class="item"></button>
</div>
CSS:
.container {
border: 5px solid blue;
display: table;
table-layout: fixed;
}
.item {
border: 3px solid red;
display: table-cell;
}
The result:
Edit: I need it to work entirely like a table cell, even without fixed sizes.
Note that some solutions seem to work fine on Chrome but don't work on FF.
How about using a label? That way you get the functionality of the button, but the visibility of the label. Tested in Firefox and Chrome. Updated example for form submission.
No JavaScript is involved with the clickability of the cell region
Works without a fixed height on the container
Works when a different cell has a larger height than the one with the button
Works with multiple button cells
HTML:
<form onsubmit="alert(); return false;">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container">
<div class="item">4</div>
<div class="item">5<br><br><br>Extended cell</div>
<label class="item">Button 1<button type="submit"></button></label>
<label class="item">Button 2<button type="submit"></button></label>
</div>
</form>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
}
.item button {
background-color: transparent;
position: absolute;
left: -1000px;
height: 1px;
width: 1px;
overflow: hidden;
}
JSFiddle here.
http://jsfiddle.net/Rhhh7/7/
In this example I've wrapped the button in the div class="item" just like the other div's. But this time, I've styled the button separately to stretch to the height and width of the div.
.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}
EDIT:
Here's the fix http://jsfiddle.net/Rhhh7/10/
To address the Firefox issue.
Add this to the class "item":
.item {
border: 3px solid red;
display: table-cell;
height:100%;
vertical-align:top;
}
In order for the td to have a height of 100%, the parent must have height of 100% as well. The vertical-align:top then sets the button to the top of the div instead of the default, middle.
button.item { width: 100%; height: 50px; }
You could always just wrap the button in a div.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"><button>Button</button></div>
</div>
CSS
button{
width:100%;
height:2.75rem;
}
So I guess at the end of the day, the final solution here is it might not be possible cross-browser without a fixed unit of measurement :(
this seems to work:
HTML
<div class="container">
<div class="item">Some text to make the cell bigger</div>
<div class="item"></div>
<div class="item"><button class="button-item"></button></div>
</div>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
background: transparent;
}
.button-item{
border: 5px;
-moz-border:5px;
height:100%;
width: 100%;
}
Fiddle Demo
How it looks on FF:
Wrapping in a div is a solution but I can't understand why you cannot change the display property for button elements like you can all other elements. For example you can make a link tag act like a div tag.
This prevents doing stuff like changing the display order of buttons:
http://codepen.io/bakers37/pen/emoKvK
In Chrome/Firefox this doesn't work as expected.
HTML
<div class="wrap">
<div class="btn bottom">Back</div>
<div class="btn top">Continue</div>
</div>
<div class="wrap">
<button class="btn bottom">Back</button>
<button class="btn top">Continue</button>
</div>
CSS
.wrap {
display: table;
margin: 20px 0 30px 0;
width: 100%;
}
.btn
{
display: block;
width: 100%;
margin: 5px 20px;
padding: 10px;
position: relative;
background: #ccc;
}
.top {
display: table-caption;
}
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>