ansaurus

Question

Answer 1

A:

Sorry for the misread, my previous Answer was using TABLE when you wanted to use DIV. Also, note that if you want to use Borders, you have to offset the width percentage. (The other answer on this page may not display properly)

<style type="text/css">
.wrapper { width:100%; background-color:#ddd; text-align:center; float:left;}
.quarter-row { width:25%; background-color:#bbb; float:left;  }
.half-row { width:50%; background-color:#999; float:left; }
.full-row { width:100%; background-color:#777; float:left; }
</style>

<div class="wrapper">
  <div class="quarter-row">1</div><div class="quarter-row">2</div><div class="quarter-row">3</div><div class="quarter-row">4</div>
  <div class="half-row">1 (50% width)</div><div class="half-row">2 (50% width)</div>
  <div class="full-row" >1 (100% width)</div>
</div>

KennyCason 2010-09-29 19:41:55

This is how I did it using a TABLE in my first downvoted answer <TABLE BORDER=2 CELLPADDING=4><TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR><TH COLSPAN=2>something</TH> <TH COLSPAN=2>something</TH></TR><TR><TH COLSPAN=4>something</TH></TR></TABLE> (This is simply for reference since I deleted my other answer as it was getting downvoted)

KennyCason 2010-09-29 20:21:55

And using TABLES makes it easier to add borders without having to adjust width percentages or other style attributes like you have to do with DIV's

KennyCason 2010-09-29 20:23:33

Answer 2

A:

Here, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html lang="en">
<head>
    <style type="text/css">
    div.row { width: 99.9%; border: 1px solid black; height: 1em;}
    div.cell2 {border: 1px solid black; height: 1em; width: 49.9%; float: left;}
    div.cell4 {border: 1px solid black; height: 1em; width: 24.9%; float: left;}
    </style>
</head>
<body>
    <div class = "row">
    </div>
    <div class = "row">
    </div>
    <div class = "cell2"></div><div class = "cell2"></div>
    <div class = "cell4"></div><div class = "cell4"></div>  <div class = "cell4"></div><div class = "cell4"></div>

</body>
</html>

The style is in the header, but it really should be in its own CSS file.

kcunning 2010-09-29 19:49:58

just a heads up but the borders throw off the alignment of your cells on my browser.

KennyCason 2010-09-29 19:56:50

As a side note: tables are not always bad. They get a bad rep due to people using them inappropriately for layout, but if you are displaying tabular data, you really should be using tables. They're easier for older screen readers to work with (508 compliance huzzah!)

kcunning 2010-09-29 20:35:14

@KennyCason: Borders can be a problem, cross-browser. If I were to really, really do this, it would be quite a bit longer, with lots of border-lefts and firsts.

kcunning 2010-09-29 20:37:05

right. I was just pointing it out for the sake of the question asker, that way he would at least know why it may not work for him. :P

KennyCason 2010-09-29 20:46:18

Of course it's just for the demo: borders don't work well with percentages and `width:49.9%` is just praying that it will fill the width without overflowing... in reality I'd put another div inside each column for the borders instead.

Andrew Vit 2010-09-29 21:06:40

Answer 3

+1 A:

Here is my proposed markup:

<div class="row">
  <div class="col half">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
  <div class="col remainder">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
</div>
<div class="row">
  <div class="col half">(3)</div>
  <div class="col remainder">(3)</div>
</div>
<div class="row">
  (4)
</div>

And styles:

/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }

/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }

The first two rows are split into half. In each half are two cells: the first is called narrow and is floated. I put 30% on the width for this one just for the demo (note: that's 30% of the half of the row). The other column is called remainder and is not floated. It uses overflow to set its own rendering context, which means it fills the block to the right of the floated column.

You can have more floated columns (left or right), but only one remainder.

I put it up on jsfiddle: play with it.

Andrew Vit 2010-09-29 21:04:00

I definitely like your CSS styling better than mine :)

KennyCason 2010-09-29 22:07:21

ansaurus

tags:

views:

answers:

Generate "table" with <div>

related questions