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
Related
I have a DIV table, it is fully responsive. The table's head should repeat in each section when we view it in a small screen. Right now it shows in the first section but the second section is missing the header.
How can I make the header show in each section on a small screen? that looks like this sample: https://codepen.io/geoffyuen/pen/FCBEg (this sample is a tr td table, my table is a DIV table)
Note: The browser needs to be minimized to see the table responsive.
DEMO: http://jsfiddle.net/w04g2qj9/2/
CSS
.header {
width: 100%;
float: left;
}
.header1 {
width: 33%;
float:left;
background: #bbb;
height: 25px;
}
.row1, .row2 {
width: 33%;
float:left;
background: #ddd;
height: 25px;
}
#media all and (max-width: 480px)
{
.header
{
width:40%;
height: 100%;
float:left;
background: red !important;
}
.header1, .row1, .row2 {width: 100% !important}
.row {
width: 60% !important; margin-bottom: 5px; float:left
}
}
HTML
<div class="table">
<div class="header">
<div class="header1">
Header 01
</div>
<div class="header1">
Header 02
</div>
<div class="header1">
Header 03
</div>
</div>
<div class="row">
<div class="row1">
row 01-1
</div>
<div class="row1">
row 02-1
</div>
<div class="row1">
row 03-1
</div>
</div>
<div class="row">
<div class="row2">
row 01-2
</div>
<div class="row1">
row 02-2
</div>
<div class="row1">
row 03-2
</div>
</div>
</div>
Div Table Image
If you run the code snippet you've provided, this is the result. I'm assuming that this is what you wanted, however, I do see a lot of redundancies in your css. For example, why have two classes row1 and row2 when they are the same thing? Unless you plan to change it so they are different at a later time.
Using Flexyou can achieve this> See Sample code below..Hope it helps
.footer_mainDIV {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.header {
width: 100%;
float: left;
}
.header1 {
width: 33%;
float: left;
background: #ccc;
height: 25px;
}
.row1,
.row2 {
width: 33%;
float: left;
background: #ddd;
height: 25px;
}
#media all and (max-width: 480px) {
.footer_mainDIV {
flex-direction: row;
flex-wrap: nowrap;
text-align: center;
}
.header {
height: 100%;
float: left;
background: red !important;
flex: 1;
/* Add other alignment related styles*/
}
.header1,
.row1,
.row2 {
width: 100% !important
}
.row {
flex: 1;
margin-bottom: 5px;
background: green !important;
}
}
<div class="footer_mainDIV">
<div class="header">
<div class="header1">
Header 01
</div>
<div class="header1">
Header 02
</div>
<div class="header1">
Header 03
</div>
</div>
<div class="row">
<div class="row1">
row 1-1
</div>
<div class="row1">
row 1-2
</div>
<div class="row1">
row 1-3
</div>
</div>
<div class="row">
<div class="row2">
row 2-1
</div>
<div class="row1">
row 2-2
</div>
<div class="row1">
row 3-3
</div>
</div>
</div>
.row {
width: 100%;
height: 150px;
}
.col {
display: inline-block;
margin: 0 auto;
height: 150px;
}
#left {
float: left;
width: 30%;
height: 150px;
background-color: red;
}
#center {
width: 40%;
height: 100%;
background-color: green;
}
#right {
float: right;
width: 30%;
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
I have read so many posts but still cannot make this work. I am missing something. I want to have these three divs in my header. The center div should be centered in the middle of the page and it will be a image. The other divs will be on the left and right and a combination of text and images as desired. I want all 3 divs to have their content vertically and horizontally centered. How do I do this and maintain some responsiveness for users on div browser and screen sizes. Responsiveness is secondary issue, getting the content aligned is the main challange. Thanks,
You can use display: table for row and display: table-cell for columns
.row {
width: 100%;
height: 150px;
display: table;
}
.col {
width: 30%;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: red;
}
#center {
width: 40%;
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
You could use CSS3 flexbox for it:
.row, .col {
display: flex;
justify-content: center;
align-items: center;
}
.col {
height: 200px;
flex: 1 100%;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
JSFiddle
How can I align two inline divs so that the their adjacent edges are center?
So I'd like it to look like this:
div1div1 div2div2
div1 div2
div1div1div1 div2div2
I tried using inline block like like below but it is merely centering each line.
.container {
text-align: center;
}
.left-div {
display: inline-block;
}
.right-div {
display: inline-block;
}
<div class="container">
<div class="left-div">div1div1</div>
<div class="right-div">div2div2</div>
</div>
<div class="container">
<div class="left-div">div1</div>
<div class="right-div">div2</div>
</div>
<div class="container">
<div class="left-div">div1div1div1</div>
<div class="right-div">div2div2</div>
</div>
https://jsfiddle.net/fkfmh7md/ to change the distance between divs, change 5px in padding:0 5px to any other value
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container div {
display: table-cell;
padding: 0 5px;
}
.container div.left {
text-align: right;
}
<div class="container">
<div class="left">div1div1</div>
<div>div2div2</div>
</div>
<div class="container">
<div class="left">div1</div>
<div>div2</div>
</div>
<div class="container">
<div class="left">div1div1div1</div>
<div>div2div2</div>
</div>
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>
There are similar questions, and answers using flexbox (css3), or table (work for the last element only).
But how can I make the element in the middle fill remaining height, using css2 (for IE8)?
.parent {
background: yellow;
display: block;
height: 200px;
}
.child {
border: solid 1px #555;
}
.fill {
height: 100%;
}
<div class="parent">
<div class="child">
1
</div>
<div class="child fill">
2 (fill available height)
</div>
<div class="child">
3
</div>
</div>
Fiddle
if you need IE8 support then use display:table/table-row
.parent {
background: yellow;
display: table;
width: 100%;
height: 200px;
}
.child {
display: table-row;
}
.height{
height: 20px /*change the value for what you like */
}
/*demo only */
.cell {
display: table-cell;
vertical-align: top;
border: 1px solid #555
}
<div class="parent">
<div class="child height">
<div class="cell">
1
</div>
</div>
<div class="child">
<div class="cell">
2 (fill available height)
</div>
</div>
<div class="child height">
<div class="cell">
3
</div>
</div>
</div>