tags:

views:

2897

answers:

20

I want to display data like the following:

 Title     Subject    Summary    Date

So my html looks like:

div class="title"  /div div class="subject" /div  .... etc.

The problem is, all the text doesn't appear on a single line. I tried adding display="block" but that doesn't seem to work.

What am I doing wrong here?

Update Please dont' tell me to use tables! I just checked the source, this very site is using DIV's!

+31  A: 

It looks like you're wanting to display a table, right? So go ahead and use the <table> tag.

Andy Lester
+2  A: 

Is there a reason to not use tables? If you're displaying tabular data, it's best to use tables - that's what they're designed for.

To answer your question, the best way is probably to assign a fixed width to each element, and set float:left. You'll need to have either a dummy element at the end that has clear:both, or you'll have to put clear:both on the first element in each row. This method is still not fool-proof, if the contents of one cell forces the div to be wider, it will not resize the whole column, only that cell. You maybe can avoid the resizing by using overflow:auto or overflow:hidden, but this won't work like regular tables at all.

gregmac
A: 

For the text to appear on a single line you would have to use display="inline"

Moreover, you should really use lists to achieve this effect

<ul class="headers">
  <li>Title</li>
  <li>Subject</li>
  <li>Summary</li>
  <li>Date</li>
</ul>

The style would look like this:

.headers{padding:0; margin:0}

.headers li{display:inline; padding:0 10px} /The padding would control the space on the sides of the text in the header/

Matthew Encinas
Why use a list to display tabular data? That's what the table tag is for.
Chris Marasti-Georg
Also, the columns beneath would not line up properly with their headers, since each list item would have a variable width depending on its content.
Chris Marasti-Georg
+8  A: 

If there's a legitimate reason to not use a table then you could give each div a width and then float it. i.e.

div.title {
    width: 150 px;
    float: left;
}
da5id
ouch! any text displayed, if zoomed, could get mangled. at least use em not px for units.
DarenW
...or specify font sizes in px as well, which effectively disables font sizing in browsers (zoom still works though).
Vilx-
+22  A: 

I would use the following markup:

<table>
  <tr>
    <th>Title</th>
    <th>Subject</th>
    <th>Summary</th>
    <th>Date</th>
  </tr>
  <!-- Data rows -->
</table>

One other thing to keep in mind with all of these div and list based layouts, even the ones that specify fixed widths, is that if you have a bit of text that is wider than the width (say, a url), the layout will break. The nice thing about tables for tabular data is that they actually have the notion of a column, which no other html construct has.

Even if this site has some things, like the front page, that are implemented with divs, I would argue that tabular data (such as votes, responses, title, etc) SHOULD be in a table. People that push divs tend to do it for semantic markup. You are pursuing the opposite of this.

Chris Marasti-Georg
I would add <thead> and <tbody> to the mix, but otherwise... this. Tables are for tabular data.
insin
+1 for thead and tbody. That is one area in my web development that could use improvement.
Chris Marasti-Georg
+2  A: 

display:block garauntees that the elements will not appear on the same line. Floating for layout is abuse just like tables for layout is abuse (but for the time being, it's necessary abuse). The only way to garauntee that they all appear on the same line is to use a table tag. That, or display:inline, and use only &nbsp; (Non-Breaking Space) between your elements and words, instead of a normal space. The &nbsp; will help you prevent word wrapping.

But yea, if there's not a legitimate reason for avoiding tables, use tables for tabular data. That's what they're for.

+5  A: 

Update Please dont' tell me to use tables! I just checked the source, this very site is using DIV's!

have a look at the source on this, mate: http://stackoverflow.com/users

A: 

You'll need to make sure that all your "cells" float either left or right (depending on their internal ordering), and they also need a fix width.

Also, make sure that their "row" has a fixed width which is equal to the sum of the cell widths + margin + padding.

Lastly make sure there is a fixed width on the "table" level div, which is the sum of the row width + margin + padding.

But if you want to show tabular data you really should use a table, some browsers (more common with previous generation) handle floats, padding and margin differently (remember the famous IE 6 bug which doubled the margin?).

There's been plenty of other questions on here about when to use and when not to use tables which may help explain when and where to uses divs and tables.

Slace
+3  A: 

or indeed this, which is very literally using tables for tabular data: http://stackoverflow.com/badges

+17  A: 

I don't mean to sound patronizing; if I do, I've misunderstood you and I'm sorry.

Most people frown upon tables because people use them for the wrong reason. Often, people use huge tables to position things in their website. This is what divs should be used for. Not tables!

However, if you want to display tabular data, such as a list of football teams, wins, losses, and ties, you should most definitely use tables. It's almost unheard of (although not impossible) to use divs for this.

Just remember, if it's for displaying data, you can definitely use a table!

stalepretzel
+3  A: 

Just to illustrate the remarks of the previous answers urging you to use table instead of div for tabular data:

CSS Table gallery is a great way to display beautiful tables in many many different visual styles.

VonC
+2  A: 
display: block

will certainly not work, try

display: inline

or float everything to the left then position them accordingly

but if you have tabular data, then it is the best to markup in <table> tag

some reference: from sitepoint

Jeffrey04
A: 
Peter Turner
What problem did you have getting XSL to validate?
Chris Marasti-Georg
+2  A: 

The CSS property float is what you're looking for, if you want to stack div's horizontally.

Here's a good tutorial on floats: http://css.maxdesign.com.au/floatutorial/

Crad
A: 

Preface: I'm a little confused by the responses so far, as doing columns using DIVs and CSS is pretty well documented, but it doesn't look like any of the responses so far covered the way it's normally done. What you need is four separate DIVS, each one with a greater "left:" attribute. You add your data for each column into the corresponding DIV (column).

Here's a website that should help you. They have many examples of doing columns with CSS/DIV tags: http://www.dynamicdrive.com/style/layouts/

All you have to do is extrapolate from their 2-column examples to your 4-column needs.

dj_segfault
Again, this is terribly anti-semantic. Picture a screen-reader trying to read this.Further, say row 1 has an item that is 1 line in the first column, and 2 lines in the second column. Row 2's first column item will not line up with row 2's second column.
Chris Marasti-Georg
+1  A: 

Using this code :

<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>

You have 2 solutions (adapt css selectors to you case):

1 - Use inline blocks

div 
{
    display: inline;
}

This will result in putting the blocks on the same line but remove the control you can have over their sizes.

2 - Use float

div 
{
    width: 15%; /* size of each column : adapt */
    float: left; /* this make the block float at the left of the next one */
}

div.last_element /* last_element must be a class of the last div of your line */
{
   clear: right; /* prevent your the next line to jump on the previous one */
}

The float property is very useful for CSS positioning : http://www.w3schools.com/css/pr_class_float.asp

e-satis
clear:both will put the element on the next line. You want clear:right, to keep the next floated element from being to the right of the last element.
Chris Marasti-Georg
Yes, you are right. I correct that.
e-satis
+1  A: 

The reason the questions page on stack overflow can use DIVs is because the vote/answers counter is a fixed width.

Jimmy
+2  A: 

Sorry, but, I'm going to tell you to use tables. Because this is tabular data.

Perhaps you could tell us why you don't want to use tables?

It appears to me, and I'm sure to a lot of other people, that you're confused about the "don't use tables" idea. It's not "don't use tables", it's "don't use tables to do page layout".

What you're doing here is laying out tabular data, so of course it should be in a table.

In case you're unclear about the idea "tabular data", I define it like this: bits of data whose meaning isn't clear from the data alone, it has to be determined by looking at a header.

Say you have a train or bus timetable. It will be a huge block of times. What does any particular time mean? You can't tell from looking at the time itself, but refer to the row or column headings and you'll see it's the time it departs from a certain station.

You've got strings of text. Are they the title, the summary, or the date? People will tell that from checking the column headings. So it's a table.

AmbroseChapel
A: 

You should use spans with:

display:inline-block

This will allow you to set a width for each of elements while still keeping them on the same line. See here, specifically this section.

Now, to appease the downvoters - of course tabular data should be in a table. But he very specifically does NOT WANT a table. The above is the answer to HIS QUESTION!!!

SamGoody
+1  A: 

Tabular data can also be represented as nested lists - i.e. lists of lists:

<ul>
    <li>
        heading 1
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
    <li>
        heading 2
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
</ul>

Which you can layout like a table and is also semantically correct(ish).

Darren Walker