I need to know how to make this table using divs, css and right xhtml
<table width="100%" border="1">
<tr>
<td style="width: 130px">1</td>
<td align="center">2</td>
<td style="width: 130px">3</td>
</tr>
</table>
Like so?
<div class="table">
<div class="row">
<span class="cell width130">1</span>
<span class="cell">2</span>
<span class="cell width130">3</span>
</div>
</div>
.table {
display: table;
width: 100%;
border: 1px solid black;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.width130 {
width: 130px;
}
here is a good examples i found
[1] http://www.c-sharpcorner.com/uploadfile/satisharveti/introduction-to-page-layout-using-div-element/
[2] http://www.ezineasp.net/post/Div-3-Columns-Layout-using-CSS-Styles-Div-layout-1.aspx
Related
I need to create a 3-column layout where the center column is twice the width of the side columns, without using bootstrap, since bootstrap doesn't work in emails.
In bootstrap, it would be:
<div class="container">
<div class="col-3">
</div>
<div class="col-6">
<!-- All page content goes here -->
</div>
<div class="col-3">
</div>
</div>
How can I achieve this without using bootstrap?
Note
I found this code:
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
But that didn't seem to work.
For emails you need tables:
table {
width:100%;
table-layout:fixed;
border-spacing:0;
}
td {
width:25%;
}
td:nth-child(2) {
width:50%;
}
.column {
padding:15px;
border:1px solid;
}
<table class="row">
<tr>
<td class="column"></td>
<td class="column"></td>
<td class="column"></td>
</tr>
</table>
Especially for emails the simplest solutions are the best, so I'd recommended to use table with inline styles, like this:
table {
width: 600px;
}
td {
border: 1px solid #000;
}
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 25%; height: 20px;"></td>
<td style="width: 50%; height: 20px;"></td>
<td style="width: 25%; height: 20px;"></td>
</tr>
</tbody>
</table>
I am not sure in what sense the given example didn't work as this snippet gives columns of widths 25%, 50%, 25% as required in the question.
However, note that some email systems may not support CSS other than an inline style so in the snippet the styles have been put inline and padding etc removed as you will have to decide what to do about that and compensate in the width definitions. It may still be that email systems do not accept HTML even just with inline CSS but it depends on your exact use case whether this matters and how you will ensure the info is presented OK to the user if it is ignored.
<div>
<div style=" background-color:#aaa; width: 25%; float: left;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div style=" background-color:#bbb; width: 50%; float: left;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div style=" background-color:#ccc; width: 25%; float: left;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
As I wrote in the comment above, today, you can only use table display for emails. Flex and Grid will not work!
There is one more very important point. Template for emails does not have access to CSS, so all styles must be specified inside tags.
I made you a simple template for emails with content. Just use it. If you need to fix or modify something, then let me know.
<table style="width: 100%; border: 1px solid black">
<tr>
<th style="width: 25%; border:1px solid black">title 1</th>
<th style="width: 50%; border:1px solid black">title 2</th>
<th style="width: 25%; border:1px solid black">title 3</th>
</tr>
<tr>
<td style="border:1px solid black">content 1</td>
<td style="border:1px solid black">content 2</td>
<td style="border:1px solid black">content 3</td>
</tr>
</table>
Use inline-styles:
<div style="display: flex;">
<div style="flex: 25%; max-width: 25%">
column 1
</div>
<div style="flex: 50%; max-width: 50%">
column 2
</div>
<div style="flex: 25%; max-width: 25%">
column 3
</div>
</div>
.row{
display:flex;
height:150px;
border:2px solid red;
}
.column{
border:1px solid green;
margin:2px;
width:30%;
}
.column1, .column3{
flex-grow:1;
}
.column2{
flex-grow:2;
}
<div class="row">
<div class="column"></div>
<div class="column2 column"></div>
<div class="column"></div>
</div>
The flex grow should be a very quick solution for you. Run the code to see how it works.
The second bit of code you posted doesn't work because you haven't defined the row or column CSS classes.
You have a two main options:
Use the bootstrap classes by copying their code into a style tag in your email body.
Write your own classes to achieve this layout. Here's an example using display: flex.
.row {
height: 100vh;
width: 100vw;
display: flex;
}
#col1 {
height: 100vh;
flex-basis: 20%;
background-color: red;
}
#col2 {
height: 100vh;
flex-basis: 60%;
background-color: green;
}
#col3 {
height: 100vh;
flex-basis: 20%;
background-color: blue;
}
<div class="row">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
UPDATE:
For Emails, Tables will work for sure :) Yup you need to go for tables only. Because some email systems don't support external CSS.
litmus.com
.table{
width:100%;
}
tr td{
width:25%;
height:50px;
}
tr .second{
width:50%;
}
<table class="table" border="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td class="second"></td>
<td></td>
</tr>
</table>
I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:
https://jsfiddle.net/6btarubL/2/
As you can see, the code is really simple:
HTML
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
CSS
tr {
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 100%;
}
td div {
height: 100%;
}
I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:
Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:
Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).
Any suggestions? Thanks!
Please Change your this Css Code and Check again. Chrome
td {
vertical-align: top;
min-width: 150px;
height:1;
}
HTML Change like below
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
The solution whas this CSS:
<!-- THIS CODE DOESN'T WORK -->
tr {
display : flex;
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 1;
}
td div {
height: 100%;
}
I'm right where I began. As #3rdthemagical pointed, the display : flex on <tr> breaks the layout and the columns aren't aligned. So, I did another test and these are the results:
WORKING CSS IN CHROME:
tr {
height: 100%;
}
td {
height: 1px;
}
div {
height: 100%;
background-color: aqua;
}
Sample output:
The above code looks like this in Firefox:
WORKING CSS IN FIREFOX:
tr {
height: 100%;
}
td {
height: 100%; /* <---------------- */
}
div {
height: 100%;
background-color: aqua;
}
But, in Chrome I have the problem for which I started this question, so it looks like this:
Who's right? Chrome or Firefox? Isn't there a cross-browser solution for this?
I'll keep on investigating...
You can use display flex
jsfiddle
CSS
tr {
height: 100%;
display: flex;
}
td {
vertical-align: top;
min-width: 150px;
}
td div {
height: 100%;
}
With flex, you can center elements, align vertically, reorder, you can do a lot of stuff.
I have already tested in mozilla, you can use prefixes to have more compatibility:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
Finally, the solution that worked for me was to use CSS conditionals and load different styles depending on the browser. I've explained it in this question:
Load different CSS rule depending on the browser in an Angular 4 component
Cheers,
I'm trying to construct a layout similar to the following:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
where the bottom is filling the space of the upper row.
If this were an actual table, I could easily accomplish this with <td colspan="3">, but as I'm simply creating a table-like layout, I cannot use <table> tags. Is this possible using CSS?
There's no simple, elegant CSS analog for colspan.
Searches on this very issue will return a variety of solutions that include a bevy of alternatives, including absolute positioning, sizing, along with a similar variety of browser- and circumstance-specific caveats. Read, and make the best informed decision you can based on what you find.
There is no colspan in css as far as I know, but there will be column-span for multi column layout in the near future, but since it is only a draft in CSS3, you can check it in here. Anyway you can do a workaround using div and span with table-like display like this.
This would be the HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
And this would be the css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
The only reason to use this trick is to gain the benefit of table-layout behaviour, I use it alot if only setting div and span width to certain percentage didn't fullfil our design requirement.
But if you don't need to benefit from the table-layout behaviour, then durilai's answer would suit you enough.
Another suggestion is using flexbox instead of tables altogether. This is a "modern browser" thing of course, but come on, it's 2016 ;)
At least this might be an alternative solution for those looking for an answer to this nowadays, since the original post was from 2010.
Here's a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table {
border: 1px solid red;
padding: 2px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
}
.table-cell {
border: 1px solid blue;
flex: 1 30%;
}
.colspan-3 {
border: 1px solid green;
flex: 1 100%;
}
<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div>
<div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
To provide an up-to-date answer: The best way to do this today is to use css grid layout like this:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
and the HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
That isn't part of the purview of CSS. colspan describes the structure of the page's content, or gives some meaning to the data in the table, which is HTML's job.
I've had some success, although it relies on a few properties to work:
table-layout: fixed
border-collapse: separate
and cell 'widths' that divide/span easily, i.e. 4 x cells of 25% width:
.div-table-cell,
* {
box-sizing: border-box;
}
.div-table {
display: table;
border: solid 1px #ccc;
border-left: none;
border-bottom: none;
table-layout: fixed;
margin: 10px auto;
width: 50%;
border-collapse: separate;
background: #eee;
}
.div-table-row {
display: table-row;
}
.div-table-cell {
display: table-cell;
padding: 15px;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
text-align: center;
background: #ddd;
}
.colspan-3 {
width: 300%;
display: table;
background: #eee;
}
.row-1 .div-table-cell:before {
content: "row 1: ";
}
.row-2 .div-table-cell:before {
content: "row 2: ";
}
.row-3 .div-table-cell:before {
content: "row 3: ";
font-weight: bold;
}
.div-table-row-at-the-top {
display: table-header-group;
}
<div class="div-table">
<div class="div-table-row row-1">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
<div class="div-table-row row-2">
<div class="div-table-cell colspan-3">
Cor blimey he's only gone and done it.
</div>
</div>
<div class="div-table-row row-3">
<div class="div-table-cell">Cell 1</div>
<div class="div-table-cell">Cell 2</div>
<div class="div-table-cell">Cell 3</div>
</div>
</div>
https://jsfiddle.net/sfjw26rb/2/
Also, applying display:table-header-group or table-footer-group is a handy way of jumping 'row' elements to the top/bottom of the 'table'.
You could trying using a grid system like http://960.gs/
Your code would be something like this, assuming you're using a "12 column" layout:
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
Try adding display: table-cell; width: 1%; to your table cell element.
.table-cell {
display: table-cell;
width: 1%;
padding: 4px;
border: 1px solid #efefef;
}
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
</div>
The CSS properties "column-count", "column-gap", and "column-span" can do this in a way that keeps all the columns of the pseudo-table inside the same wrapper (HTML stays nice and neat).
The only caveats are that you can only define 1 column or all columns, and column-span doesn't yet work in Firefox, so some additional CSS is necessary to ensure it will displays correctly.
https://www.w3schools.com/css/css3_multiple_columns.asp
.split-me {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-count: 3;
-moz-column-gap: 0;
column-count: 3;
column-gap: 0;
}
.cols {
/* column-span is 1 by default */
column-span: 1;
}
div.three-span {
column-span: all !important;
}
/* alternate style for column-span in Firefox */
#-moz-document url-prefix(){
.three-span {
position: absolute;
left: 8px;
right: 8px;
top: auto;
width: auto;
}
}
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>
<div class='split-me'>
<div class='col-1 cols'>Text inside Column 1 div.</div>
<div class='col-2 cols'>Text inside Column 2 div.</div>
<div class='col-3 cols'>Text inside Column 3 div.</div>
<div class='three-span'>Text div spanning 3 columns.</div>
</div>
<style>
/* Non-Essential Visual Styles */
html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; }
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
border: 2px dashed black; border-top: none;
text-align: center; background-color: #ddffdd;
}
</style>
if you use div and span it will occupy more code size when the datagrid-table row are more in volume. This below code is checked in all browsers
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
If you come here because you have to turn on or off the colspan attribute (say for a mobile layout):
Duplicate the <td>s and only show the ones with the desired colspan:
table.colspan--on td.single {
display: none;
}
table.colspan--off td.both {
display: none;
}
<!-- simple table -->
<table class="colspan--on">
<thead>
<th>col 1</th>
<th>col 2</th>
</thead>
<tbody>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- the <td> spanning both columns -->
<td class="both" colspan="2">both</td>
<!-- the two single-column <td>s -->
<td class="single">A</td>
<td class="single">B</td>
</tr>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<!--
that's all
-->
<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
tableClasses.toggle('colspan--on');
tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>
I came here because currently the WordPress table block doesn't support the colspan parameter and i thought i will replace it using CSS. This was my solution, assuming that the columns are the same width:
table {
width: 100%;
}
table td {
width: 50%;
background: #dbdbdb;
text-align: center;
}
table tr:nth-child(2n+1) {
position:relative;
display:block;
height:20px;
background:green;
}
table tr:nth-child(2n+1) td {
position:absolute;
left:0;
right:-100%;
width: auto;
top:0;
bottom:0;
background:red;
text-align:center;
}
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
You could always position:absolute; things and specify widths. It's not a very fluid way of doing it, but it would work.
I've created this fiddle:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
Media Query classes can be used to achieve something passable with duplicate markup. Here's my approach with bootstrap:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency #cart.total %></td>
</tr>
colspan 1 for mobile, colspan 5 for others with CSS doing the work.
Here is some mock code. Basically I have no control over the table elements ONLY the div's inside the td's. I need to be able to hover over any of the div's in the row and they all hover to the same state. Can this be done?
Fiddle
HTML and CSS:
.one {
background-color: #0000FF;
width: 200px;
height: 30px;
}
.two {
background-color: #ff0000;
width: 200px;
height: 30px;
}
.three {
background-color: #00FF00;
width: 200px;
height: 30px;
}
/*.one:hover, .two:hover, .three:hover {
background-color: #000;
}*/
.row1:hover {
background-color: #000;
}
<table>
<tr>
<td>
<div class="row1 one">
</div>
</td>
<td>
<div class="row1 two">
</div>
</td>
<td>
<div class="row1 three">
</div>
</td>
</tr>
</table>
In CSS there is no parent selector yet. Therefore, you can't do this directly.
However, you can try using :hover on the nearest common ancestor:
tr:hover .row1 {
background-color: #000;
}
.one {
background-color: #0000FF;
width: 200px;
height: 30px;
}
.two {
background-color: #ff0000;
width: 200px;
height: 30px;
}
.three {
background-color: #00FF00;
width: 200px;
height: 30px;
}
tr:hover .row1 {
background-color: #000;
}
<table>
<tr>
<td>
<div class="row1 one"></div>
</td>
<td>
<div class="row1 two"></div>
</td>
<td>
<div class="row1 three"></div>
</td>
</tr>
</table>
Note it's not exactly the same: if you hover the border between two cells, they will change color even if you aren't hovering any .row1.
I don't think that's possible using just CSS, given that you have no control / access whatsoever to the table or tr above. If you do have some access (or can say for sure that the divs will be wrapped in a tr, try this code:
(basically, put a rule on the grandfather tr)
tr:hover > td > div {
background-color: black;
}
https://jsfiddle.net/zbqzu21r/
Weird idea:
You have the parent tr which you cannot control. Try making a table and nesting it inside the td. I'm assuming you can easily control anything done on this table. So, put your selectors on this table, and be done with it.
.mytable:hover tr > td > .row1 {
background-color: black;
}
<tr>
<td>
<table class="mytable">
<tr>
<td>
<div class="row1 one">
</div>
</td>
</tr>
<tr>
<td>
<div class="row1 two">
</div>
</td>
</tr>
<tr>
<td>
<div class="row1 three">
</div>
</td>
</tr>
</table>
</td>
</tr>
How can I make a table in css/html like this:
I want to use only div, not <table> tags.
Code, yet:
<style>
.tab_in {
display: table-cell;
border: 1px dotted red;
padding: 4px 6px;
}
</style>
<div style="text-align:center;">
<div class="tab_in">
<div>a</div>
<div>b</div>
</div>
<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>
</div>
Use fluid grid system which uses percents instead of pixels for column widths. and handle the external width of it using a external container.
You can do something like:
JSFiddle Demo
HTML:
<div class="box">
<div class="row-fluid show-grid">
<div class="span4">
<div class="rowspan2">
<span class="valign-helper"></span>
a
</div>
<div class="rowspan2">
<span class="valign-helper"></span>
b
</div>
</div>
<div class="span4">
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<div class="span4">
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</div>
</div>
</div>
Note: to vertically align text you can also do using "display: table-cell" css property to the class 'rowspan2'. and remove the tag with class "valign-helper"
CSS:
body {
margin: 50px;
}
.box {
width:500px;
padding: 0 10px;
background-color: #000;
}
.show-grid [class*="span"] div {
background-color: #fff;
text-align: center;
min-height: 40px;
line-height: 40px;
margin-left: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.show-grid [class*="span"] .rowspan2 {
height: 90px;
margin-bottom: 0;
}
.valign-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Here's an example of one way you might accomplish this:
http://jsfiddle.net/mori57/cDEGw/1/
html:
<table class="tab_out">
<tr>
<td rowspan="0" class="col">
<div class="tab_in">a</div>
<div class="tab_in">b</div>
</td>
<td><div class="tab_in">c</div></td>
<td><div class="tab_in">g</div></td>
</tr>
<tr>
<td><div class="tab_in">d</div></td>
<td><div class="tab_in">h</div></td>
</tr>
<tr>
<td><div class="tab_in">e</div></td>
<td><div class="tab_in">i</div></td>
</tr>
<tr>
<td><div class="tab_in">f</div></td>
<td><div class="tab_in">j</div></td>
</tr>
</table>
CSS:
.tab_out {
width: 800px;
margin-bottom: 20px;
text-align:center;
}
.tab_out td {
border:1px dotted red;
padding: 4px 6px;
margin-bottom: 0;
vertical-align:middle;
}
.tab_in {
display: block;
border: 1px dotted green;
}
Is this any closer to what you're looking for? I really don't see an efficient way to accomplish your layout without using a table, at this point. Mind you, the div inside each TD is optional, I just used it to show you where the element actually appears inside the table.