I have this fiddle which has three blocks of equal width. How can we make this of different sizes, say given 100%, first block 20%, second block 50% and the third 30%.
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div><div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column
{
display: table-cell;
background-color: red;
}
You could use nth-child:
.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>
Related
I'm trying to create a HTML page with a proportional table, using div elements only. I wish the left column to take 60% of the table width and have 3 rows. For the 2nd column I wish it to take the remaining 40% of the table's width, and have 4 rows, each row with 2 cells.
Here is my HTML markup: Why I only see the first (left) column?
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #DDDDDD;
}
#MasterDiv {
display: table;
height: 100%;
width: 100%;
}
.left {
display: table-column;
width: 60%;
}
.right {
display: table-column;
width: 40%;
}
.A {
height: 30%;
display: table-row;
}
.B {
height: 35%;
display: table-row;
}
.B2 {
height: 25%;
display: table-row;
}
.C1 {
display: table-cell;
background: #ff00ff;
}
.C2 {
display: table-cell;
background: #ffffff;
}
.C3 {
display: table-cell;
background: #0000ff;
}
.C4 {
display: table-cell;
background: #ff0000;
}
.C5 {
display: table-cell;
background: #00ff00;
}
.C6 {
display: table-cell;
background: #000000;
}
<div id="MasterDiv">
<div class="left"></div>
<div class="right"></div>
<div class="A">
<div class="C1"></div>
</div>
<div class="B">
<div class="C2"></div>
</div>
<div class="B">
<div class="C3">
</div>
</div>
<div class="B2">
<div class="C1"></div>
<div class="C2"></div>
</div>
<div class="B2">
<div class="C3"></div>
<div class="C4"></div>
</div>
<div class="B2">
<div class="C5"></div>
<div class="C6"></div>
</div>
<div class="B2">
<div class="C4"></div>
<div class="C6"></div>
</div>
</div>
you need to nest your rows and columns within the left and right divs. At the moment you're declaring left and right but have no content inside them and there's mix of table and div elements which can confuse things.
I've made a div only example of what you described above. The "row" divs on the left take up 100% and the 'split-columns' take up 50% of the "right" width. The height is based on content but if you want to specify you can do by adding an id or class.
.container {
width: 100%;
font-family: Helvetica, Sans-Serif;
}
.left,
.right,
.split-column {
float: left;
background-color: #f9f9f9;
}
.left {
width: 60%;
}
.right {
width: 40%;
}
.split-column {
width: 50%;
background-color: lightblue;
}
<div class="container">
<div class="left">
<div class="row">
row 1
</div>
<div class="row">
row 2
</div>
<div class="row">
row 3
</div>
</div>
<div class="right">
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
</div>
Try this
http://www.cssdesk.com/5wSVE
I have added some css from TJ Hannington answser
I want to display a number and 2 text areas in a row.
The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".
I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.number {
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
}
.row > div {
display: inline-block;
vertical-align: top;
}
.row {
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.
EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".
Use flex display: table-cell
Update 1: show how to create "margin" wíthout using cell padding
Update 2: show a progressive enhancement to use flex when available
*{
box-sizing: border-box;
}
.container {
width: 40%;
}
.number{
background: skyblue;
}
.row > div {
display: table-cell;
vertical-align: middle;
}
.row {
background: lightgreen;
position: relative;
}
/* 3 ways to create a left margin on textArea */
.row .textArea.nr1 { border-left: 10px solid transparent; }
.row .textArea.nr2 { position: relative; left: 10px; }
.row .textArea.nr3 { padding-left: 10px; }
/* feature detect - use flex when available */
#supports (display: flex) {
.row > div {
display: block;
}
.row {
display: flex;
}
.row .number {
display: flex;
align-items: center;
}
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr1">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr2">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr3">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
You can use flexbox to achieve that, all modern browsers support it, and with prefixes it also works on IE10.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: flex;
}
.number {
background: skyblue;
display: flex;
align-items: center;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
Or, use CSS table making it to work on legacy browsers too.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: table;
width: 100%;
}
.number,
.textArea {
display: table-cell;
}
.number {
background: skyblue;
white-space: nowrap;
vertical-align: middle;
}
.textArea {
width: 100%;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.container{
width: 40%;
}
.number{
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
height: 40px;
padding-top: 11px;
}
.row > div{
display: inline-block;
vertical-align: top;
}
.row{
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
How can I make the 3 child divwith class .box have the same width while fluidly occupying the entire parent container div while staying inline.
Here is a fiddle
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
margin: 1em;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
use CSS flexbox for that
#container {
width: 20em;
display: flex;
background: red;
text-align: center;
}
.box {
flex: 1;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
OR
use inline-block as you already are using, with a few tweaks.
* {
box-sizing: border-box
}
#container {
width: 20em;
background: red;
text-align:center
}
.box {
font-size: 16px;
display: inline-block;
width: calc(100% / 3);
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
OR
use CSS tables for old browsers support
#container {
width: 20em;
display: table;
background: red;
text-align: center;
}
.box {
display:table-cell;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
display:table version:
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container">
<div class="box">test
<br/>+ 1line ?</div>
<div class="box">test</div>
<div class="box middle">test</div>
</div>
table-layout:fixed will fix width value you set, for main container and children.
if children(table-cell) have no width set, they will spray evenly
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test test test test </div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container"class=" bis ">
<div class="box">testtesttesttest testtesttest</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
If you want to do this with display: inline-block you can set equal width of 33.33% on each .box, remove white space from HTML and also add box-sizing: border-box.
* {
box-sizing: border-box;
}
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
width: 33.33%;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
https://jsfiddle.net/zfacazy0/
.row {
width:200px;
background:blue;
display:block;
overflow:hidden;
}
.col{
width:30%;
margin-right:5px;
background:red;
float:left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
if I put 33% and the margin is too much it will not have single row. Either I adjust margin or width, I just can't do a proper 3 column with equal margin and width. Need help.
Check this. You can use the first-child attribute to remove margin from first element.
.row {
width: 200px;
background: blue;
display: block;
overflow: hidden;
}
.col {
width: 30%;
margin-left: 5%;
background: red;
float: left;
}
.col:first-child {
margin-left: 0px;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
Just display:flex can do the trick:
.row {
width:200px;
background:blue;
display:flex;
overflow:hidden;
}
.col{
width:33%;
margin-right:5px;
background:red;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
.row {
width: 200px;
background: blue;
display: flex;
overflow: hidden;
}
.col {
width: 33.33%;
margin-right: 5px;
background: red;
float: left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
I have a parent div of unknown width (the width depend on some screen width calculations). The number of the child divs is 4 and are floated so that they are horizontally aligned. The 1st, 2nd and 4th are good candidates for fixed width value. However, the 3rd element can stretch to fit the remaining space in the parent div.
I don't know why the approach of display:table; for parent and display:table-cell for children didn't work for me. The three element's width is fixed except for the concerned div where I also tried width:auto to no avail.
<div class="parent">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
</div>
A minimal CSS:
.parent
{
width: 100%;
display:table;
}
.first
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.second
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.third
{
height: 80px;
float: left;
display: table-cell;
}
.fourth
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
Your usual help is much appreciated.
You can do this with Flexbox, so if you add flex: 1 to one child div it will take rest of free width
.parent {
display: flex;
border: 1px solid black;
}
.child {
border: 1px solid black;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
flex: 1;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
Or you can use CSS Table with table-layout: fixed here is Browser support
.parent {
display: table;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
.child {
border: 1px solid black;
display: table-cell;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
width: 100%;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
For IE9+
You can use inline-block and calc() for this.
Snippet
body {
margin:0
}
.parent {
border:solid black;
font-size:0; /*fix inline-block gap*/
}
.child {
border: 1px solid red;
margin: 5px;
width:100px;
display:inline-block;
font-size:16px /*restore font -size*/
}
.calc{
width: calc(100% - 348px)
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child calc">three</div>
<div class="child">four</div>
</div>
For IE8+
you can use display:table/table-cell
Snippet
body {
margin: 0
}
.parent {
border: solid black;
display: table;
table-layout: fixed;
width: 100%;
/*optional*/
border-collapse:separate;
border-spacing:5px;
box-sizing:border-box;
}
.child {
border: 1px solid red;
width: 100px;
display:table-cell;
}
.big {
width:100%
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child big">three</div>
<div class="child">four</div>
</div>