CSS tabular fields

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

CSS tabular fields

Post 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
example.png (2.85 KiB) Viewed 1022 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
  1. Give the .field div a border the width & colour of what appears to be the .field-label field.
  2. 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
  1. 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.
  2. 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 :?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: CSS tabular fields

Post 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.
(#10850)
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: CSS tabular fields

Post 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">&nbsp;</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> 
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS tabular fields

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS tabular fields

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS tabular fields

Post 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 :oops:
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: CSS tabular fields

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS tabular fields

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS tabular fields

Post 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
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: CSS tabular fields

Post by Kieran Huggins »

wrap your input boxes in labels, then use a little CSS to make the magic happen.

Example: http://urbanemagazine.ca/subscribe
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS tabular fields

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS tabular fields

Post 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;
    }
 
Post Reply