Text alignment without Table Cells

HTML & CSS
1

Hey im looking for a simple way to redesign my data report to display without Table

Before i started redesigning the tables were outputing data in a semi formated order

Product : Detail
Product : Detail

The Table cells made sure that the product name and the details all started at the same point on the page just like all posts on the message boards start at a point

i have all this content inside 1 div now, displaying using <p> for paragraphs and breaking where needed

but my information looks like this

Product : details
Extended Version : details
ID : details
sanity : details

making it slightly harder to read, ive bolded the left hand side of the : to make it a little better but id prefer if i could somehow make

it read
: details
: details
: details
: details

as i read down with the titles to the left still but there is spacing between the say
product
and the
:

ive tried
  but it aligns so badly it makes me want to cry
any help on this would be great

Cheers

dionsis

2

Hi,

Any reason you don’t want to use a standard table with borders? What you have is tabular data, that said it doesn’t make too much sense to use divs.

3

well the page is loading a LOT of information generated from the database

when i use tables the page can generate in upwards of 2 minutes to fully load

when i use div’s it loads in about 5-6 seconds

thats my reason for choosing div’s , but i need to align segments of code individually inside the div without using tables to slow it down

4

Hi,

Alright, well you could do this:


<style type="text/css">
.leftcell
{
   float: left;
   text-align: right;
}
.rightcell
{
   float: left;
   text-align: left;
   padding-left: 5px; /* give some spacing here to fake cell padding */
}
</style>

<div>
  <div class="leftcell">Product</div><div class="rightcell">: details</div>
  <div class="leftcell">Blah</div><div class="rightcell">: etc</div>
</div>
5

just tried that there

i just lines the text up just like it were written side by side

i.e. i got

Product : details
another product : details

instead of the words before the :
and then
:details
:details

the colons need to align correctly independent of the length of the word before it

6

Hmm, try defining widths on the divs (100px or so)

7

Bingo - Right on the Button , Brilliant, Cheers for that

8

Cool, I thought that was it. Basically the div’s will take up as much space as their child elements inside. The width is done to expand all divs to the same width, so text will align properly based on the width.

9

It sounds like you need to paginate your data. Have you tried that?

10

no were talking data layout here and his suggestion was perfect

11

I ran into this issue today while trying to layout tabular-like data. I wanted to do it with a table but was told to do it with divs and css.

The problem I came across is that I needed a containing div to have padding and a border, then I need to create divs inside of this to act as table rows. But some of these table rows have 2 column within them, others have three. And once I started floating things, it just became a mess.

I had something similar to this:

<div>
 <div class="leftCol">Left column content</div>
 <div class="rightCol">Right column content</div>
</div>
<div>
 <div class="leftCol">Left column content</div>
 <div class="leftCol">Left column content</div>
 <div class="rightCol">Right column content</div>
</div>

Are there any more tutorials on how to make this work? With good examples?

12

You were told not to use tables for displaying tabular data?!?

13

if might be a project

plus with the right code a div can be made to do anything you like
tabulating shouldnt be too hard,