Im using display table for a 3 column section of my site. Im doing this as I need to vertically center the content of the first column.
How can I move the third column to the right while still keeping its text left aligned?
<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</span>
</span>
.cont {
display: table;
border: 1px solid black;
width: 100%;
}
.one,
.two,
.three {
display: table-cell;
}
.one {
background: grey;
vertical-align: middle;
}
.two {
background: green;
}
http://codepen.io/anon/pen/azbmrP
One simple solution is to use float: right to .three class and vertical-align: top to .two class:
.cont {
display: table;
border: 1px solid black;
width: 100%;
}
.one,
.two,
.three {
display: table-cell;
}
.one {
background: grey;
vertical-align: middle;
}
.two {
background: green;
vertical-align: top;
}
.three {
float: right;
}
<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</span>
</span>
Use
.three
{
float:right;
}
http://codepen.io/anon/pen/raNMXr
.table { display: table; margin-left: auto;}
DEMO
<span class="cont">
<span class="one">One</span>
<span class="two">One</span>
<span class="three">
<div class="set">
<div class="a">Some text and A</div>
<div class="b">Some more text and B</div>
</div>
</span>
</span>
.set{ float:right;}
Here is a solution:
.three > div {
float: right;
}
and you can put a <br>tag after first div.
Link: http://jsfiddle.net/7081odd1/
Related
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I Need to wrap the text in the right side respecting the left side and the column on the right in gray.
I have tried everything and searched on the internet, nothing seems to work.
I put min-width to the table-cell in the left side but then it takes space on the gray side.
add display:inline-block in stretch class and set your desire width
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I need equal height columns which vertically centre there content. When each column div is a direct descendant of a container this is easy to do with display table: http://codepen.io/anon/pen/XKzOrv
However I have nested divs. Is it still possible to achieve this layout without modifying my markup?
UPDATE - As I'm supporting IE9+ I cant use flexbox.
.cont {
width: 500px;
}
.depth1 {
width: 50%;
float: left;
display: table;
}
.depth2 {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.a {
background: blue;
}
.b {
background: green;
}
.c {
background: orange;
}
.d {
background: grey;
}
<div class="cont">
<div class="depth1">
<div class="depth2 a">
A
</div>
<div class="depth2 b">
B
<br>Wrap
</div>
</div>
<div class="depth1">
<div class="depth2 c">
C
<br>
<br>
<br>Wrap
</div>
<div class="depth2 d">
D
</div>
</div>
</div>
Yes it is possible with Flexbox, just use display: flex on all child div elements except on .c and add align-items: center on .depth2
.cont {
width: 500px;
display: flex;
}
.depth1 {
width: 50%;
display: flex;
}
.depth2 {
width: 50%;
}
.depth2:not(.c) {
display: flex;
align-items: center;
}
.a {
background: blue;
}
.b {
background: green;
}
.c {
background: orange;
}
.d {
background: grey;
}
<div class="cont">
<div class="depth1">
<div class="depth2 a">
A
</div>
<div class="depth2 b">
B
<br>Wrap
</div>
</div>
<div class="depth1">
<div class="depth2 c">
C
<br>
<br>
<br>Wrap
</div>
<div class="depth2 d">
D
</div>
</div>
</div>
I've got some 'person' divs in a 'main' div. On 'person':hover I show an overlaying div. I want it appear only within the 'main' div, not go beyond 'main's boundaries.
This way:
When cursor over AGCH div
When cursor is over JALO div
I want Jack London's right border aligned with main's right border.
The complete example here: https://jsfiddle.net/yjdrnk9o/1/
HTML
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
CSS
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
Thank you
Like this? https://jsfiddle.net/yjdrnk9o/3/
I added a class to your html to distinguish the last .person from the others and then said that the .more child of the .person.right element should be aligned to the right.
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more {
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person on-right">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
use :last-of-type or :nth-of-type(3)
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more{
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
How to make two elements aligned so they will be at same distance from line in center which should be in center of wrapper. Also wrapper width is not fixed and may change.
http://jsfiddle.net/x2b2ax37/2/
<div id="block">
<div id="wrapper">
<span id="div1">2222</span>
<span id="div2">2 %</span>
</div>
<div id="wrapper">
<span id="div1">11</span>
<span id="div2">100 %</span>
</div>
<div id="wrapper">
<span id="div1">21</span>
<span id="div2">0 %</span>
</div>
</div>
1 - Initial 2 - What I expect
You could achieve it like this:
(Updated with .classes instead of #IDs)
JSFiddle - DEMO
.wrapper {
position: relative;
}
.div1 {
border: 1px solid #F00;
right: 50%;
position: absolute;
}
.div2 {
border: 1px solid #000;
position: relative;
left: 50%;
display: inline-block;
}
.block {
border: 1px solid green;
width: 200px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>
The trick as shown earlier by Mary Melody is to use a combination of absolute and relative positioning on the child span elements, .div1 and .div2.
To make sure that the top and bottom border edges line up exactly, apply display: inline-block
to the span child elements.
The trick is to keep .div2 in the flow with a 50% left margin, which provides space for .div1,
which will be absolutely positioned using right: 50%.
To control the spacing between the two span's, add a 1px right-margin to .div1 and to preserve
symmetry, use left: 1px on .div2.
.wrapper {
position: relative;
border: 1px dashed blue;
margin-bottom: 10px;
}
.div1, .div2 {
border: 1px dotted blue;
display: inline-block;
}
.div1 {
position: absolute;
right: 50%;
margin-right: 1px;
}
.div2 {
position: relative;
margin-left: 50%;
left: 1px;
}
<div class="block">
<div class="wrapper">
<span class="div1">2222</span>
<span class="div2">2 %</span>
</div>
<div class="wrapper">
<span class="div1">11</span>
<span class="div2">100 %</span>
</div>
<div class="wrapper">
<span class="div1">21</span>
<span class="div2">0 %</span>
</div>
</div>
i do not advise to use id, u can use classes because u can not repeat the same ids each time, below is the code updated and as well a live demo.
.wrapper_block{
text-align: center;
}
.wrapper_container span{
display: inline-block;
vertical-align: top;
}
.wrapper_container span span{
display: block;
}
.wrapper_left{
text-align: right;
}
.wrapper_right{
text-align: left;
}
.wrapper_left span{
border: 1px solid red;
margin-bottom: -1px;
}
.wrapper_right span{
border: 1px solid black;
margin-bottom: -1px;
}
<div class="wrapper_block">
<div class="wrapper_container">
<span class="wrapper_left">
<span>2222</span>
<span>11</span>
<span>21</span>
</span>
<span class="wrapper_right">
<span>2 %</span>
<span>100 %</span>
<span>0 %</span>
</span>
</div>
</div>
Just need to make the div1 and div2 to inline blocks and set a width for them and also text-align to the different alignments.
Simple example
#div1 {
border: 1px solid red;
display:inline-block;
width: 50px;
text-align:right;
}