In below code how to place text center to the border space just above it as illustrated in the screenshot below "Some Text 1" and "Some Text 2" are in the center to the border space above them.
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
You can achieve that with placing your text elements in the cells, setting them to position: absolute; and push them 50% of their own width out of the cell with transform: translate(50%, 0);.
Of course you'll need proper vendor prefixes to support older browsers.
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
position: relative;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
.Column > span {
position: absolute;
right: 0;
top: 1.5em;
transform: translate(50%, 0);
text-align: center;
}
<div class="Row">
<div class="Column">C1<span>Some Text 1</span></div>
<div class="Column">C2<span>Some Text 2</span></div>
<div class="Column">C3</div>
</div>
You could use pseudo-elements to add text and position it with position:absolute and transform: translate()
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
position: relative;
}
.Column:nth-child(1) {
width: 20%;
}
.Column:nth-child(2) {
width: 50%;
}
.Column:nth-child(3) {
width: 30%;
}
.Column:nth-child(1):after,
.Column:nth-child(2):after {
content: 'Some text 1';
position: absolute;
right: 0;
bottom: 0;
transform: translate(50%, 100%);
text-align: center;
}
.Column:nth-child(2):after {
content: 'Some text 2';
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Simple answer using table layout to keep it consistent with what your doing:
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
.Row2 {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column2 {
display: table-cell;
text-align:center;
width:40%;
}
.Column2:nth-child(2) {
width:60%;
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
<div class="Row2">
<div class="Column2">Some Text 1</div>
<div class="Column2">Some Text 2</div>
</div>
Try with new markup with position: absolute;
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
position: relative;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
.Column > span {
position: absolute;
right: -45px;
top: 20px;
}
<div class="Row">
<div class="Column">C1<span>Some Text 1</span></div>
<div class="Column">C2<span>Some Text 2</span></div>
<div class="Column">C3</div>
</div>
Related
In the following code snippet I am trying to make the third div element (the green one) to occupy the free space above it. I am looking for the most abstract solution. What I mean is that I am not looking for a solution with exactly three inner divs and two-column scenario. What is more, I dont want to use bootstrap or any other plugin.
.outer {
background-color: yellow;
width: 500px;
height: 500px;
}
.inner-1 {
float: left;
background-color: red;
align-self: start;
}
.inner-2 {
float:left;
background-color: lightblue;
align-self:start;
}
.inner-3 {
float:left;
background-color:green;
align-self:start;
}
.p-1 {
width:200px;
height:200px;
}
.p-2 {
width:200px;
height:250px;
}
.p-3 {
width:200px;
height:200px;
}
.inner-1::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.inner-2::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.inner-3::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<div class="outer">
<div class="inner-1">
<div class="p-1">one</div>
</div>
<div class="inner-2">
<div class="p-2">two</div>
</div>
<div class="inner-3">
<div class="p-3">three</div>
</div>
</div>
This is usually called Masonry layout. There is currently no perfect way to do this with pure CSS for the general case. Although there are several techniques to achieve this for specific scenarios.
For example, you can use vertical columns if you don't want the block order to be strict.
.outer {
background-color: yellow;
width: 500px;
height: 500px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
}
.inner-1 {
float: left;
background-color: red;
align-self: start;
}
.inner-2 {
float:left;
background-color: lightblue;
align-self:start;
}
.inner-3 {
float:left;
background-color:green;
align-self:start;
}
.p-1 {
width:200px;
height:200px;
}
.p-2 {
width:200px;
height:250px;
}
.p-3 {
width:200px;
height:220px;
}
.inner-1::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.inner-2::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.inner-3::after{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<div class="outer">
<div class="inner-1">
<div class="p-1">one</div>
</div>
<div class="inner-2">
<div class="p-2">two</div>
</div>
<div class="inner-3">
<div class="p-3">three</div>
</div>
</div>
There's a good article on this topic at CSS-tricks: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
You can always use Flexbox well I created an example for you take a look.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 200px; /* You can change it later */
display: flex;
padding: 1.25rem; /* just to show background-color "yellow" */
background-color: yellow;
}
.inner {
width: 100%;
height: 100%:
}
#inner__one {
background-color: red;
}
#inner__two {
background-color: green;
}
#inner__three {
background-color: lightblue;
}
<div class="outer">
<!-- You can sepeare them by giving it ID -->
<div class="inner" id="inner__one"></div>
<div class="inner" id="inner__two"></div>
<div class="inner" id="inner__three"></div>
</div>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
I'm trying to create basic admin interface for my app where everything should be display all the time except one div, block, should be scrollable when overflowed
Here's html:
<div class="all">
<div class="header">
<div class="logo">a</div>
<div class="body">b</div>
</div>
<div class="content">
<div class="left">c</div>
<div class="right">
<div class="block">
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
</div>
</div>
</div>
</div>
and css:
body
{
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin:0px;
}
.all
{
position: relative;
display: table;
width: 100%;
height: 100%;
}
.header
{
display: table-row;
position: relative;
height: 50px;
}
.header .logo
{
position: relative;
display: table-cell;
background-color: red;
}
.header .body
{
position: relative;
display: table-cell;
background-color: yellow;
}
.content
{
position: relative;
display: table-row;
}
.content .left
{
position: relative;
display: table-cell;
height: 100%;
width: 150px;
background-color: green;
}
.content .right
{
position: relative;
display: table-cell;
height: 100%;
background-color: blue;
}
.block
{
display: block;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
}
.one, .two, .three
{
border: 1px solid black;
height: 500px;
}
.one
{
background-color: aliceblue;
}
.two
{
background-color: aqua;
}
.three
{
background-color: brown;
}
I encoutred one problem, in IE, Chrome i see scrollbar, but not in Firefox. I created JS fiddle, so you can see:
Link
Can someone help me?
Changing to position:absolute on block class does solves the problem you can have a look at this fiddle
How to position three blocks in the table-cell follows: p1 top, p2 bottom, p3 in the middle?
The html as next:
<div id="table">
<div id="row">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
</div>
CSS
#table{
display: table;
width:500px;
height:500px;
max-height:500px;
min-height: 500px;
}
#row{
display:table-row;
}
#r1, #r2, #r3{
display:table-cell;
}
Details - http://jsfiddle.net/2ZF6J/
IE7 does not support display: table so you can just simply use floats and absolute positioning.
HTML:
<div id="wrapper">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
CSS:
#wrapper {
width:500px;
height: 1px;
min-height: 300px;
}
#r1 {
position: relative;
width: 177px;
border:1px solid black;
}
#r3 {
width: 156px;
background-color: #aef;
}
#r2 {
width: 161px;
border:1px solid black;
background-color: #eee;
}
#r1, #r2, #r3 {
float: left;
height: 100%;
}
#p1, #p2, #p3 {
position: absolute;
width: 100%;
}
#p1 {
top: 0;
background-color: gold;
}
#p2 {
bottom: 0;
background-color: crimson;
}
#p3 {
top: 50%;
margin-top: -0.5em;
background-color: orange;
}
See it here: http://jsbin.com/ekImIYih/3
Im here because other similar questions couldn't help my particular problem.
How can #right div height making 100% ?
Only css solution needing. Thanks.
http://jsfiddle.net/elturko/86nX9/
HTML
<div id="wrap">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background:#ddd
}
#header{
height:104px;
background:#d5a1b3;
}
#left{
float:left;
width:219px;
background:#a2d025;
}
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
}
#footer{
clear:both;
height:15px;
background:#ed653a;
}
Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}
Take this out of css for #right{} :
margin:0 15px;
This will make it wide 100%. I'm a little confused on the 100% height. Did you meant wide?
Important will over-ride other CSS attributes and auto will make the div as large as it needs to be to fit the contents.
height: auto !important;
height: 100%;
Try this:
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
top: 0px;
bottom: 0px;
}
Add top: 0px; bottom: 0px; to your #right css
I restructured your html a bit. Is that your desired outcome?
jsfiddle
<div id="container">
<div id="wrap">
<div id="header">
header
</div>
<div id="body">
<div id="left">
left
</div>
<div id="right">
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
css
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
}
#wrap {
overflow: auto;
padding-bottom: 16px;
}
#header {
height: 104px;
background:#d5a1b3;
border-bottom: 1px solid #000;
}
#body {
overflow: hidden;
height: 100%;
}
#right {
margin: 0px 0px 0px 220px;
background:#FFF;
}
#left {
width: 219px;
float: left;
background:#a2d025;
}
#footer {
background:#ed653a;
border-top: 1px solid #000;
position: relative;
height: 20px;
margin-top: -21px;
clear: both;
}
#footer p {
margin: 0px;
}