Should I use CSS to align 2 columns of label&Field pairs? 1

[tomouse]

Hi,

I haven't worked on websites for years and years and don't really know enough about the capabilities of CSS to know whether it is the right tool for my job. I do hear that tables are a big no-no nowadays, so I'd like to avoid using them if it is bad practice.

I have around 12 labels to display on the left of the page. Against each label there will be data coming from a database, some of which will be multi-line potentially, plus some radio buttons, etc. As is often the style for these things, I want the labels (on the left of the page) to align right and I want the data fields (to the right) to align left.

I expect this is simple using div tags and a style sheet, but after searching around for sometime I have not found the answer. I have CSS setup for applying various styles and things already, but I'm not clear on how to use it to achieve this particular set of layout requirements. Can anyone help?

 

[vacunita]

Lets put it this way, if you are building a website, or working on one you need to be using CSS. There's no other way around that.

With that said, tables are not completely barred, its just that they are now used for what they were meant to be used which is displaying tabular data, and not used for layout of a site.

Just to clarify what you want, Should it look something like this?:

 __________________  ____________________
|                  ||                    |
|            Label || Data               |
|                  ||                    |
|            Label || Data               |
|                  ||                    |
|__________________||____________________|

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[tomouse]

Hey Phil, thanks for this. Your diagram pretty much sums it up. I want labels and data controls, aligned in pairs across the page, but also in right and left vertically aligned columns (respectively) as you've shown.

Is this a case where a table is the correct structure? Because I have it working as a table, but wasn't sure if this was a very outdated way of doing it.

 

[vacunita]

While we could argue here forever whether the data is tabular or not, I think you could easily pull off what you want with a few divs and CSS.

Try this for instance:

<div id="datacontainer">
  <div class="paircontainer">  
    <div class="labels">
     Label info goes here
    </div>

    <div class="data">
    Data would go here
    </div>
    <p class="clr">
  </div>
  </div>

#datacontainer{
width:100%;
}
.paircontainer{

border:2px groove #DDDDDD;
background-color:#DDDDDD;
}

.labels{
float:left;
width:49%;
text-align:right;
margin-right:6px;

border-right:2px groove #DDDDDD;
}
.data{
float:left;
width:49%;
text-align:left;
margin-left:6px;

border-left:2px groove #DDDDDD;
}
.clr{
clear:both;
}

Basically you can repeat the paircontainer div with its divs inside as many times as you need for as many labels and data pairs are you have.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[BillyRayPreachersSon]

I'd take that one step further and negate the need for the p.clr by moving the clear:both into the .paircontainer rule.

If you're then worried about the extent of div.paircontainer, investigate

http://www.positioniseverything.net/easyclearing.html

and

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/.

It's been a very long time since I used markup solely for clearing.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[vacunita]

Very interesting about the overflow:auto. Learn something new every day.

So for revision purposes

...
.paircontainer{

border:2px groove #DDDDDD;
background-color:#DDDDDD;
[red]overflow:auto;[/red]
}

...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[BigRed1212]

This probably isn't the right way but for comparison and additional information purposes this is how I do it:

<html>

<head>
<title>Form test</title>

<style>
label {float:left;
width:100px;
padding:0 1em;
text-align:right;}

fieldset {width:350px;
border:1px solid black;
padding:1px;}

</style>

</head>

<form>

<fieldset>
    <legend>Personal information</legend>
      <label for="fname"> First name:</label>
      <input name="fname" id="fname" type="text" />
<br>
      <label for="lname"> Last name:</label>
      <input name="lname" id="lname" type="text" />
<br>
      <label for="stradd">Address:</label>
      <input id="stradd" name="stradd" type="text" />
<br>
      <label for="city">City:</label>
      <input id="city" name="city" type="text" />
<br>
      <label for="state">State:</label>
	<input id="state" name="state" type="text" />
    <br>  
	<label for="zip">Zip code:</label>
      <input id="zip" name="zip" type="text" />
<br>
      <label for="age">Age:</label>
      <input id="age" name="age" type="text" />
</fieldset>

</form>

</body>
</html>

I lifted that code from somewhere. Maybe David Anderson Unfinished Symphony. I forget.

 

[tomouse]

Excellent, thanks everyone! I'll give it a try.