Page 1 of 1
CSS tabular fields
Posted: Thu Jan 17, 2008 1:39 am
by pickle
Hi all,
In an effort to appease all the table naysayers here, I'm trying my darndest to make a layout with div soup. The current problem I'm on doesn't appear to be do-able without tables. I've searched far and wide through Google & haven't found anything that can satisfactorily do what I'm trying to do.

- example.png (2.85 KiB) Viewed 1023 times
The dark(er) blue is a placeholder for the menu I've got - it's working fine & is just in the image to put the main problem in context. The light blue sections are field labels for form elements. The white sections are what hold the data.
As the image shows, sometimes the field label wraps onto multiple lines and sometimes the field data wraps.
The layout of the code is like so:
Code: Select all
<div class = "field"> <div class = "field-label"> This is the blue area. This is where "Field Label" would be placed </div> This is the white area. This is where "Field Data" would be placed.</div>
The methods I've tried so far are:
Method 1
- Give the .field div a border the width & colour of what appears to be the .field-label field.
- Float the .field-label div left, give it a width the same size as the .field border, and a negative margin of that same size.
Here's the CSS for this method, as it's what I've currently got:
Code: Select all
.field{ position:relative; display:block; background:#fff; border-left:200px solid #4fb2fe; overflow:visible; color:#f00; margin-bottom:10px; padding:3px;}.field-label{ float:left; position:relative; margin-left:-195px; width:195px; display:inline;}
Why it doesn't work: Since .field-label is floated, if the .field-label content is taller than .field's content, it just floats outside the .field div. If I've got multiple fields one above the other, the .field-label content gets shoved behind & is useless.
Method 2
- Give the .field div a background image. The background image is placed & repeated in such a way as to mimic the background colour of the .field-label div.
- Float the .field-label div left, and give it the same width as the blue area of the .field div's background image.
Don't have the CSS for this one - I tried it & it failed so I moved on.
Why it doesn't work: Since the .field-label div is floated, it's only as high as it's content. If the .field content wraps onto multiple lines, anything in the .field section on subsequent lines wraps around into the .field-label section.
I've been working & puzzling with this thing for at least a week now. Had I been using tables it would have been done in 20 minutes. I'm sending this out to the community here in one last attempt to get a div soup solution.
Best of luck

Re: CSS tabular fields
Posted: Thu Jan 17, 2008 1:51 am
by Christopher
I think you need to do something like this:
Code: Select all
<div class="field"> <div class="field-label"> This is the blue area. This is where "Field Label" would be placed </div> <div class="field-data> This is the white area. This is where "Field Data" would be placed. </div></div>
Think of field as row and field-label/field-data as cols.
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 2:05 am
by VladSun
That's the closest I am able to think of
Code: Select all
.container{ background-color: black; width: 460px; padding: 20px; float: left;} .blue_area{ background-color: blue; width: 200px; float: left;} .field_area{ width: 200px; margin-left: 20px; background-color: white; float: left;} .field, .field_data{ float: left; width: 50%; border-bottom: 1px solid black;} .field{ background-color: aqua;}
Code: Select all
<div class = "container"> <div class = "blue_area"> </div> <div class = "field_area"> <div class = "field">f1</div><div class = "field_data">d1</div> <div class = "field">f2</div><div class = "field_data">d2</div> <div class = "field">f3</div><div class = "field_data">d3</div> <div class = "field">f4</div><div class = "field_data">d4</div> </div></div>
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 2:45 am
by pickle
Thank you both for your replies.
@~arborint: I had that thought too. However, unless you know some magical css-fu that I don't, then there's no way to get both .field-label and .field-data to be 100% of the height of .field
@~VladSun: Thanks for laying that out. However, your example suffers from a problem with .field_data is on more lines than .field. .field doesn't have the same height as .field_data so .field_data's colour appear below .field. Replace "d1" with "d1<br />d1.2" and you'll see what I mean.
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 10:47 am
by matthijs
Arborint is in the right direction. Use something like:
Code: Select all
.field_area
{
float: left;
width: 300px;
margin-left: 20px;
background: white url(somerepeatingimg.gif) 0 0 repeat-y;
}
.field {
float:left;
width:100%;
border-bottom: 1px solid black;
}
.field_label {
float:left;
width:50%;
}
.field_data {
float:right;
width:49.9%;
}
<div class = "field_area">
<div class = "field">
<div class="field_label">f1</div>
<div class = "field_data">d1 this one has much longer content what</div>
</div>
<div class = "field">
<div class="field_label">f2</div>
<div class = "field_data">d2</div>
</div>
</div>
The secret is setting the repeating img in the background of the
parent element, in this case field_area. That img will be 50% colored for the labels. Now, no matter which is higher, label or data, the background runs through. By the way, I have used 49.9% to have a small margin in case some browser decides to round stuff to 101%. You can also use less.
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 10:49 am
by kaszu
Here is CSS for arborints html:
Code: Select all
.field {
background: blue;
width: 100%;
overflow: hidden;
margin-bottom: 10px;
}
.field_label, .field_data {
float: left;
width: 50%;
}
.field_data {
background: white;
}
Only in html "field-label" should be "field_label" and "field-data" should be "field_data".
Edit: and again i was tooo slow and forgot about the label

Re: CSS tabular fields
Posted: Thu Jan 17, 2008 12:25 pm
by Kieran Huggins
if the data is tabular, why aren't you using tables?
Tables aren't the devil or anything, they just shouldn't be used for general layout - only for the layout of tabular data, which it seems you have.
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 2:02 pm
by matthijs
Kieran is right about that.
However, if the data is not tabular, a solution using some other html markup (maybe a list, a definition list, divs, etc) can be more flexible then using a table.
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 4:46 pm
by pickle
Thanks for the replies.
@~Kieran: What I'm trying to layout is a bunch of form fields (on the right) and their text descriptions (on the left) - just a standard form. I wouldn't consider that tabular data (Oh, but that I could

).
@~Matthijs: Thanks for the CSS. A couple problems with it though. 1) I don't want the .field_area to be a set width. I didn't say so earlier - my fault. I'd also like the .field_label to be a set width (again, didn't say so earlier). If I take off your width:300px declaration for .field_area, there's some div displacement issues at small resolutions. Also, your background declaration doesn't seem to center the background image. I used a 2000px image 1/2 blue 1/2 white. When I changed the "0 0" to "top 50%", it works in Safari, but completely disappears in Firefox.
@~kaszu: Thanks, but that's not quite going to work. If the information in .field_label is taller than the information in .field_data, the blue shows underneath the .field_data div
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 5:10 pm
by Kieran Huggins
wrap your input boxes in labels, then use a little CSS to make the magic happen.
Example:
http://urbanemagazine.ca/subscribe
Re: CSS tabular fields
Posted: Thu Jan 17, 2008 5:57 pm
by pickle
That's a neat way to do it. They essentially built the layout from the right to left.
Trouble with that is the fields to be left aligned, as the .field is going to be fluid & as wide as possible. So, I can't use their static width settings, nor can I right-align the .field_data content.
This problem is due to the fact that it looks like you can't have 2 divs right beside each other that can both grow to the full height of their container. Any floating of a child removes it from consideration when calculating the height of the parent.
Thanks for your help folks, but I think I'll move to tables. They seem to be the only way to get two identically tall rectangles beside each other, with the left rectangle being a static width, the sum of the two rectangle's width = 100%, and with both rectangles growing to contain the height of both rectangle's content.
Re: CSS tabular fields
Posted: Fri Jan 18, 2008 2:11 am
by matthijs
pickle wrote:
@~Matthijs: Thanks for the CSS. A couple problems with it though. 1) I don't want the .field_area to be a set width. I didn't say so earlier - my fault. I'd also like the .field_label to be a set width (again, didn't say so earlier). If I take off your width:300px declaration for .field_area, there's some div displacement issues at small resolutions. Also, your background declaration doesn't seem to center the background image. I used a 2000px image 1/2 blue 1/2 white. When I changed the "0 0" to "top 50%", it works in Safari, but completely disappears in Firefox.
1) You can give the field_area any width you want. A fixed px width, a percentage, or full width. The reason I gave it a width is because I floated it. The reason I floated it is because then it will "clear" the 2 floated child elements. However there are more solutions to clear a float. So you can easily change that width or set it to 100% of it's parent.
2) The background image can easily be set at at some position. I do agree it takes a bit of thought. However, if you want to have the labels a fixed with it's easy. Make an image 200px wide with the right color and set it as
Code: Select all
background:transparent url(image.gif) top left repeat-x;
Then give the labels a width of 200px (or a bit less) as well. Last, give the labels a margin-left of 200px (or a bit more), no float, no width.
Quickly put this together:
Code: Select all
* { margin:0;padding:0; }
.container {
background-color: black;
width:80%;
padding: 20px; /*better set this on another wrapper element, as width80% and px dont work together */
float: left;
}
.blue_area {
background-color: blue;
width: 200px;
float: left;
}
.field_area {
border:1px solid #fff;
margin-left:210px;
background: white url(somerepeatingimg.gif) 0 0 repeat-y;
}
.field {
border-bottom: 1px solid black;
}
.field_label {
float:left;
width:200px;
}
.field_data {
margin-left:205px;
}