[SOLVED] Should I just use tables here?

[phpknight]

I have just adopted CSS recently from my old way of thinking, and I have spent about six hours trying to get somebody done that would have taken about 10 minutes with a table. So, I figured I would post here.

 

 

Basically, I would like to do one of two things:

1.) Have about six forms that would display 2-6 on a row depending on the users screen size.  Just normal flow.

OR

2.) If I cannot do that, I would settle for 2 rows of 3.

 

For both, I would like the content to be centered vertically on the page (appoximately, just not scrunched at the top) with relatively even horizontal spacing as well.  It seems difficult to achieve the latter with no float: center available.

 

However, I cannot seem to get this done.  float: left seems promising , but when things start wrapping, depending on the width of each element, they sometimes look like this:

 

1, 2, 3,

      4  ???

5, 6

 

instead of this:

1, 2, 3

4, 5, 6

 

I tried to make them inline instead, but then they just all run to the top of the container.  Getting two rows of three while keeping them evenly spaced seems difficult as well, something easy to do with a table.

 

So, the question is this: should I just use a table here even though it is not tabular data?  Obviously, if CSS is supposed to work better, the solution should probably be rather uncomplicated I would hope.  If it seems obvious based on the specs, that is great.  But, if it seems just to be a workaround for the table, I would probably just stick with a table.  I would appreciate any advice anybody may have here.

 

 

 

[ToonMariner]

NO!

 

go and learn how to do it with css... the informtion you absorb will enrich your life and make you a better lover...

[phpknight]

LOL! Yeah, but how do I even begin to figure it out?  I just plowed through the Defininite Guide to CSS, and he really did not get into grid-like stuff.

 

Also, the fact that percentage widths leave scroll bars sometimes is not that great, AND when you crunch the browser, the table retains it shape, but the float elements just start collapsing like this, which looks horrible:

1

  2

3 

  4

 

instead of this:

1 2

3 4

 

Is there a better way to go about doing this in CSS?  I would be happy to try it.

[phpknight]

I have an update on this one.  Some people on the web were using lists to simulate tables, but I did not like that solution because it just seems like a hack. 

 

However, this solution actually comes pretty close to what I need without using lists:

http://www.alistapart.com/articles/practicalcss/

 

The only difficulty with this method is that it only works if all the div elements are the same height.  For instance, if all divs are 100, you will get this during a wrap:

1, 2, 3

4, 5, 6

 

But, if the first element is larger than the others, this happens:

1, 2, 3

  4, 5,

6

 

because in css, the higher position is chosen over the one farther to the left or right.  Other than that, this looks promising.  In fact, this actually is not much different from what I originally did except that I figured out it is the height, not the width, that is the issue.  I am marking this one as solved, then, but I would appreciate a solution to getting a good wrap with varying heights if somebody has one.

[ToonMariner]

what you need to do is ignore the design for the moment...

 

produce something that 'makes sense' with no styleing at all (as if you were using a text only browser to view the page).

 

THEN use some css to layout the form.  The issue of things moving about is the beauty of floats - design so that it looks great at your chosen resolution and still looks like it is structured properly at lower and higher res's.

[TheFilmGod]

Easily done css. Mad easy! 

 

Here is the code I would do:

 

Css:

#container {
     width: 300px;
}
#rowone {
     position: relative;
     height: 50px;
}
#element1 {
     width: 100px;
     position: absolute;
}
#element2 {
     width: 100px;
     position: absolute;
     left: 100px;
}
#element3 {
     width: 100px;
     position: absolute;
     right: 0px;
}
#rowtwo {
    position: relative;
    height: 50px;
}
#element4 {
     width: 100px;
     position: absolute;
}
#element5 {
     width: 100px;
     position: absolute;
     left: 100px;
}
#element6 {
     width: 100px;
     position: absolute;
     right: 0px;
}

 

HTML:

 

<html>
<head>
<title>TheFilmGod Is Awesome since he created this...</title>
</head>

<body>

<div id="container">
   <div id="rowone">
        <div id="element1">1</div>
        <div id="element2">2</div>
        <div id="element3">3</div>
   </div>
   <div id="rowone">
        <div id="element4">4</div>
        <div id="element5">5</div>
        <div id="element6">6</div>
   </div>
</div>

</body>
</html>

 

 

There are a few rules before you use this. Change the height of the row elements to suit your needs. The reasons they are position: relative; is because I use right: 0px; on the third element. You can take it off and change it to left: 200px;

 

Lastly, don't argue with me. I know you don't use floats. And for you guru css ppl, just leave me alone. I know the firefox and Opera and IE bugs with floats. Floats are screwed up. Keep it simple and a way that will work across all browsers and resolutions... Absolute positioning. Floats are good for 2 columns. That's it. Even then the extra necessary div tag to clear the floats is a headache. Don't agree with me, then just look at the clear property. There is no attribute to clearing the third column, only right left and both!!

 

Oh yeah, if you want to use my code you need to leave the title tag in place. Otherwise its stealing.!!

 

Just kidding!!

[TheFilmGod]

Oh yeah, I checked the css and html I made. It should work like a charm. Try it out! Make sure you create a link to the css file in the html!

 

Yes, my example uses height: 50px; but it does vary from what you said. It doesn't matter if one element is a lot bigger than the other, because it is for that whole row only. YOu take the biggest height and put that in for the row, not each separate element. Its pretty darn close to what you wanted!

[phpknight]

Okay, that seems pretty good.  But...

 

Are you just really making a table with divs?  CSS people generally do not like tables for the most part, but if it looks like a table and quacks like a table, it's a table.    What is the benefit of using this over a normal table that will just strech and expand with content (something this won't do if I don't know the height ahead of time)? 

 

Is it just that divs are better logical grouping for the information?  BTW, I seriously want to like CSS, I am not just messing with you.  It is just that to get something simple done in CSS takes me hours longer than tables.

[TheFilmGod]

I totally agree. I know what you mean. Sometimes CSS IS a waste of time.

 

It all depends on what you are working on. For example, I'm currently working on a long term project that I know will have php tags all over the place. Like crazy style. After I finish all the styling I don't want to be bothered with tables. Tables aren't bad but they don't really tell you what cell you are working with. Divs act just the same way but give you a description like ID="example1" while tables just give you <td></td>, not very helpful.

 

This is where you have to come in and be like, is CSS worth my time? Will I just be better of without CSS? Sometimes you will sometimes you won't. I still use tables once in a while when there is a column of 4 or more. Sometimes I simply waste my time with CSS, but in the long run CSS pays off.

 

For instance, after I learned CSS, I began creating things just as fast as tables and customizing it twice as good.

 

Relize that tables are sometimes not valid xhtml. YOu can't have width="something px" you must have call up a class that has that attribute. - You might as well use CSS.

 

[AndyB]

Relize that tables are sometimes not valid xhtml

 

Compliant html table code that's not valid (x)html is an interesting concept.

[phpknight]

Okay, I see.  Thanks for your help!

[ToonMariner]

here is how I layout a form

<form>
<fieldset>
  <legend>YOUR 1st ROW</legend>
  <label for="text1">Text1:</label>
  <input type="text" class="textbox" name="text1" id="text1" value="" />
  <label for="text2">Text2:</label>
  <input type="text" class="textbox" name="text2" id="text2" value="" />
  <label for="text3">Text3:</label>
  <input type="text" class="textbox" name="text3" id="text3" value="" />
</fieldset>
<fieldset>
  <legend>YOUR 2nd ROW</legend>
  <label for="text4">Text4:</label>
  <input type="text" class="textbox" name="text4" id="text4" value="" />
  <label for="text5">Text5:</label>
  <input type="text" class="textbox" name="text5" id="text5" value="" />
  <label for="text6">Text6:</label>
  <input type="text" class="textbox" name="text6" id="text6" value="" />
</fieldset>
</form>

now you can allow them to be side by side if the browsers width is sufficient or on top of each other if its not...

 

fieldset
{
float: left;
width: 250px;
margin: 5px;
}

label
{
float: left;
clear: left;
width: 80px;
}

input.textbox
{
margin-left: 85px;
}

 

 

have a play - i sometimes have a spot of bother with the clear: left on the lables and end up puting a div around label and input just to group them...

[phpknight]

For forms, I actually just use tables within divs (as the box for the form).  This is simply because it is much easier to create forms with way with PEAR's HTML_Form class.  The divs themselves, though, are what I see to get looking right.  You guys have helped out quite a bit with that. 

[jcombs_31]

Okay, that seems pretty good.  But...

 

Are you just really making a table with divs?  CSS people generally do not like tables for the most part, but if it looks like a table and quacks like a table, it's a table.    What is the benefit of using this over a normal table that will just strech and expand with content (something this won't do if I don't know the height ahead of time)? 

 

Is it just that divs are better logical grouping for the information?  BTW, I seriously want to like CSS, I am not just messing with you.  It is just that to get something simple done in CSS takes me hours longer than tables.

 

You are correct, his example of CSS defeats the purpose.  Clean markup is what you want.  Your solution with using a fixed height is as far as I know the only way to get the wrapping floats to work perfect.  This is perfectly acceptable in my opinion. 

 

Toonmariner laid out a nice example of how to set up a form.

[TheFilmGod]

Relize that tables are sometimes not valid xhtml

 

Compliant html table code that's not valid (x)html is an interesting concept.

 

AndyB, if you keep reading my post I explain how a table can be not valid.

 

You contradicted yourself.