Using divs like a table

acmdas
5 Feb 2007

I'm formatting a very long questionnaire - 1800 questions. They're typically of the form: variable name, question text, response set (often Y/N). They look like:

                                                                 Yes     No
 S1a.  This is question S1a...................................... 1       0
 S1b.  This is question S1b that has longer text
       and wraps................................................. 1       0

I'm doing fine formatting these with tables, but think that it should be possible without resorting to them.

I can get very close with a series of <div>s positioned absolutely with left margins and widths but am somehow missing a few details.

First, when I create a series of "rows" of div "variable", div "text", div "yes", div "no" each row overwrites the next unless I follow with <br> - that's clearly not right but I'm just too dense to get it myself.

Second, when the text wraps, I can't get the Y/N text to "float down" to be the equivalent of bottom-aligned in the tables.

Hope this is the right amount of detail...appreciate any help as always.

David

mikeday
5 Feb 2007

To be honest your document does look like a table to me: it has multiple columns with a consistent width and rows with a consistent height. You may be able to create this layout without using tables, but the resulting markup and style will probably be less obvious, as you are losing the structure that the table elements make explicit.

Here is one way it is possible to do it using inline-block rather than positioning:

.row div { display: inline-block }
.num { width: 2cm; vertical-align: top }
.text { width: 6cm }

<div class="row">
<div class="num">S1a.</div>
<div class="text">This is question S1a</div>
<div class="answer">1 0</div>
</div>

<div class="row">
<div class="num">S1b.</div>
<div class="text">This is question S1b<br/>it wraps to the next line</div>
<div class="answer">1 0</div>
</div>

Each row div is a block, while the divs inside are inline blocks that will stack horizontally across in an line. The inline blocks have an explicit width to get the column effect and they will line up with bottom alignment by default, so I've explicitly specified that the question number should be aligned at the top.

You will notice that in terms of markup this is pretty much equivalent to using the table elements, except it's less obvious for someone to read and the styling is more complicated to achieve the same result.

acmdas
5 Feb 2007

Mike -

Thanks both for the suggestion that I stick with tables, and the alternative using display:inline-block. I'd been trying to have a "container" div but that setting eluded me.

I'll go over this with the coder who'll have to generate the markup in C# and see if he has a preference.

Thanks again!

David

StoneCypher
30 Mar 2007

Many people particularly sensitive to markup concerns might suggest instead that the list of questions be rendered as an unordered list (which would make handling your counters rather simpler, too.) Each <li> would be width-fixed, and each list item would contain a series of display:inline-block elements with their respective widths fixed.

Manual clearing and breaking, using tables to achieve layout goals for non-tabular data and so on are typically symptomatic of markup which does not semantically match contained data. Your rows should look something like this:

<html><head><style type="text/css">
  li { border-bottom: 0.2em solid #ccc; }
  .qtext { width: 25em; max-width: 25em; display: inline-block; text-align: justify; border-right: 0.05em dotted #ddd; padding: 0.25em 0.5em 0.25em 0; }
  .yescol { width: 2em; max-width: 2em; display: inline-block; text-align: center; margin-right: 1em; }
  .nocol { width: 2em; max-width: 2em; display: inline-block; text-align: center; }
</style></head><body>
<ul>
  <li>
    <span class="qtext">Question</span>
    <span class="yescol">Yes</span>
    <span class="nocol">No</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width, which is likely to happen with this very large text that I am obviously dragging out for no apparent reason</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width, which is likely to happen with this very large text that I am obviously dragging out for no apparent reason</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width, which is likely to happen with this very large text that I am obviously dragging out for no apparent reason</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
  <li>
    <span class="qtext">This is question Foo, which will wrap if it hits its max width, which is likely to happen with this very large text that I am obviously dragging out for no apparent reason</span>
    <span class="yescol">1</span>
    <span class="nocol">1</span>
  </li>
</ul>
</body></html>

[/code]

John Haugeland is http://fullof.bs/

Forum › How do I...?

Using divs like a table