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>
Related
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;
}
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
Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?
I've been banging my head for days over this and tried everything I could possibly think of.
This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-cell;
}
.col-left, .col-right {
float: left;
width: 50%;
height: 100%;
}
/*--this should be vertically centred--*/
.content {
}
HTML
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>SOME TEXT</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="SOME IMAGE URL">
</div>
</div>
</div>
</section>
JSFiddle
.row {
...
display:table-row;
}
.col-left, .col-right {
...
display: table-cell;
vertical-align: middle;
}
Demo
You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-row;
}
.col-left, .col-right {
display:table-cell;
width: 50%;
height: 100%;
vertical-align:middle;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
you can try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table;
}
.col-left, .col-right {
float: left;
display:table;
vertical-align:middle;
width: 50%;
height: 100%;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
display:table-cell;
vertical-align:middle;
height:100%;
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.
I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.
One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.
A simple structure like this is all you need:
.container {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.
I thought this articles on the subject were interesting:
Give Floats the Flick in CSS Layouts
Farewell Floats: The Future of CSS Layout
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
I created a sample of the situation in JSFiddle
I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).
I want the table to take up the remaining height, for some reason the height: 100% is not working?
From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.
So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.
HTML
<div class="wrapper">
<div class="wrapper_content">
<!--Header-->
<div class="header">Header</div>
<div class="content table">
<div class="row">
<div class="l_cell">left</div>
<div class="r_cell">right</div>
</div>
</div>
<div class="push"></div>
</div>
</div>
<!--Footer-->
<div class="footer">Footer</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px;
background-color: black;
}
.container {
}
.table {
display: table;
height: 100%;
width: 100%;
background-color: yellow;
}
.row {
display: table-row;
}
.l_cell {
display: table-cell;
width: 265px;
background-color: orange;
}
.r_cell {
display: table-cell;
background-color: purple;
}
.header {
background-color: red;
width: 100%;
}
.footer {
height: 50px;
background-color: green;
}
.push {
height: 50px;
}
Here is one solution, http://jsfiddle.net/7t4RT/
This question has been asked many times before. I recommend viewing some of the answers already provided here at StackOverflow.
The reason that we're unable to use height: 100% in your example is because no height has defined. The CSS is wondering... well how high is 100%? There are many ways to get our elements to fill their containers in either HTML or CSS. Simply choose one you feel works better for you.
The following is one of many ways to solve this problem.
HTML:
<div class="fill-height">
<p>Filled</p>
</div>
<div class="cant-fill-height">
<p>Not Filled</p>
</div>
CSS:
body {
background-color: #ccc;
}
.fill-height {
background-color: #0ff;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.cant-fill-height {
background-color: #ff0;
width: 200px;
height: 100%;
margin-left: 200px;
}
I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.
http://jsfiddle.net/x11joex11/r5spu85z/10/
CSS
body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
height:100%;
width:100%;
display:table;
background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}
HTML
<div class="wrapper table">
<div class="header row">
Header<br/>
Header2
</div>
<div class="content table">
<div class="row">
<div class="cell left">leftt<br/>left2</div>
<div class="cell right">right<br/>right2</div>
</div>
</div>
<div class="footer row">
Footer
<br/>
Footer2
</div>
</div>
An answer not requiring the use of display:table or table tags is preferred.
Notice the sticky footer effect remains.