"Never" use tables for page layout? 1

[LarrySteele]

Okay, we've all read that there are few evils as bad as using tables for page layout. Got it.

The page I'm currently working on is the classic "C." It's pretty straightforward until I get to the content div on the first page.

The first page includes a simple input form. The page background is white, and they want the input form to be wrapped in a lite gray box. They want a second box, lighter gray to the right that will contain instructions or whatever. The left side of box 2 will be 15px to the right of box 1 and will continue to page end.

Height of both boxes will be the same.

Width of box 1 will vary because there's a select box that's filled from a database - and this will end up driving the width of the first box. This prevents us from using fixed positioning.

Here's the conceptual layout:

+----------------------+   +--------------------------------->>
| (background: eaeaea) |   |  (background: e4e4e4)            
|                      |   |                                  
| label  [form field]  | w |  Lorem ipsum dolor sit amet,     
|                      | h |  consectetur adipiscing elit.    
| label  [form field]  | i |  Nunc egestas.                   
|                      | t |                                  
| label  [form field]  | e |                                  
|                      |   |                                  
| label  [form field]  | s |                                  
|                      | p |                                  
| label  [form field]  | a |                                  
|                      | c |                                  
|          submit      | e |                                  
|                      |   |                                  
+----------------------+   +--------------------------------->>

I've checked through a few CSS books I have here and have queried the great Google machine for ideas and answers.

Generally speaking, most point towards using floats. I've used floats for the page header successfully, and figured floating would probably be the best path for this request. So tried playing with floats a bit - floating everything left. For the white space in the middle, I added floated a div that was 15px wide with a white background. Here are some of the problems I had - if text in the right box was too long to display on one line, rather than simply wrapping, it first moved the box below box one, then wrapped. When it was short enough not to wrap, it was not same height as box 1. I had situations where the second gray box placed its top left corner at the same position as the top left corner of the first box.

I played around with so many variations of floats that I really did lose track of which wrong effect went with which rendering attempt.

There's a very easy way to manage this - make a one row table with three columns. Easy to write, easy to understand, and easy to maintain.

=========================================================

I'm curious how others would handle a page layout like this. Do you "break the rules" and use a table to layout these elements? Do you go through a bunch of CSS gymnastics? Or, have my books and the great Google failed me and there's a straightforward method for doing this that I haven't found?

This question is more philosophical than technical. I know that generally speaking, tables should be used to display tabular data. I know that creating the classic "C" page layout is better left to CSS than tables. But CSS has some definite limitations and I think there ought to be some balance between CSS-purists who proclaim though-shalt-not and those of us in the field who are trying to get the job done effectively and efficiently.

 

[vacunita]

While there are certain things that tables do that cannot be replicated thoroughly with modern techniques there are very few reasons to want to return to a tabular layout.

For your problem at hand there is a term called faux columns.

Short of using javascript divs cannot calculate their height based on their surroundings. They calculate their height based on their content.

With faux columns you can make it look like a column extends the same height as another column when in reality it does not.

2 things you need to have in mind is whether you want the form box to have a specific width in pixels or if you want it to be a certain percentage of the total width of the browser window.

That small detail will determine how you go about constructing the layout. As you have no doubt seen you can't make a div fill the remainder of the space between the end of one div and the end of the page.

If you specify percentages for both, then its easy to do. If you want fixed pixel widths, then you need to determine a size for your website. In larger resolutions this is noticeable with bars or gutters running along the sides of the browser

Just a side note In my opinion using tables for layout is neither "effective" nor "efficient". Its simply easier in the beginning to construct, but very much harder to maintain and modify should the need arise.

<!DOCTYPE HTML>
<html>
<head><title>C-Layout</title>
<style type="text/css">
#wrapper{
background-color:#dedede;
overflow:hidden;
}

#formBox{
width:20%;
margin-left:4px;
background-color:#bebebe;
float:left;
border-right:15px solid white;
}

#formBox p{
padding:8px;
}

#rightBox{
width:78%;
float:left;
}
#rightBox p{
margin:10px;
}

</style>
</head>
<body>
<div id="wrapper"> 
  <div id="formBox">
    <h2>Form goes here</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis risus sed ligula porta in sodales est malesuada.</p>
  </div>
  <div id="rightBox">
  <h2>Instructions</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis risus sed ligula porta in sodales est malesuada. Ut ullamcorper diam ac enim feugiat vitae interdum mauris pretium. Maecenas nec elit ut augue malesuada rhoncus at egestas nunc. Vivamus lacinia rhoncus velit, vitae tristique tortor pretium in. Vestibulum sit amet orci laoreet tellus sodales commodo. Cras id bibendum mi. Aliquam erat volutpat. In volutpat gravida pretium. Duis condimentum tellus et est cursus rhoncus. Vivamus mattis, arcu sed adipiscing venenatis, orci nisl accumsan nibh, nec semper orci mi facilisis elit</p>
  </div>
</div>

</body>
</html>

In this case the form box/column must always be longer than the instructions box. If you need the instructions box to be longer than the form box then you need to change a few things around.





----------------------------------
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/

 

[LarrySteele]

Thanks Phil...

"2 things you need to have in mind is whether you want the form box to have a specific width in pixels or if you want it to be a certain percentage of the total width of the browser window."

Actually, option 3. The form box will be sized based on the size of the form, and as I said, this will be based on the size of the select box that pulls information from a database - the size does change. So fixing the form size by pixels is out and fixing it as a percentage of page width is also out. I probably could have mentioned that I had reviewed a few faux columns options and didn't see anything that enabled the first column's width to expand/contracted horizontally based on content.

Because I prefer to use CSS, I gave your script a go. Unfortunately, the rightBox div was pushed below the formBox div. At least that's the way it looks in IE6. Now, in FF4 - things are really weird...

+-+------------------+  +------------------------->
|.| Form goes here+++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.| +++++++++++++++++|  |........................
|.+------------------+--+........................
|................................................
|Instructions....................................
|................................................
|................................................
|................................................
|................................................
|................................................
|................................................
|................................................
|................................................
|................................................
+------------------------------------------------>

Notice that rightBox div actually starts to the left of formBox, is covered by formBox and its associated right border, and reappears after the border. The text for rightBox appears under formBox. *To clarify - in order to get this effect, you will have to narrow your browser window. And yes, we do have people who have their resolution set to 640x480.

It may be that IE6 is wrapping the same way. For some reason, the gray background in the rightBox div is white in IE6.

This is what I meant that the one-row, three-column table layout approach can be effective - we can get the page to render correctly w/o concern that the third column will move below the first column. It's also efficient in that we can complete work on the page now. Okay, maybe the word I really wanted to use was expedient. Yep, now that I checked the dictionary, that's the word.

The problem I have with the layout-by-table approach - even in this example - is that it's just taking a short cut to get the page into production. From my experience, this approach almost always results in harder to manage site in the end.

Oh - really like how you handled the white space between the two divs. I should have thought of that, but I guess I was a bit focused on...did I mention that they wanted a dark border around the first div? But as I see your solution, I figure that can be managed by adding consecutive div wrappers to create the borders they want, but could still use the spacing border like you had in yours.

I would like to know how to get divs to stop moving around on the screen w/o going to absolute positioning.

Do appreciate your opinion - that's really what this post was about. Like I said, I use tables to display tabular data and not for layout. Recently I've read some posts on this forum and others that suggest that there may be a question of balance - that *sometimes* it makes sense to use tables for other than tabular data. Wanted to see what people on this forum thought about that.

Larry

 

[traingamer]

The form box will be sized based on the size of the form, and as I said, this will be based on the size of the select box that pulls information from a database - the size does change.

It's tough (ok, virtually impossible) to use floats if you cannot specify a width. If, however, you know the maximum width of the items in the select box, you can simply specify a width that will accomodate that.

Barring that, you may (or may not) want to experiment with overflow.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[vacunita]

1. Trying to be compliant and getting things to work when catering to IE6 is pointless. You learn that the hard way. IE6 is a dead browser at this point. Anybody that's still using it can not expect websites to look 100% correct, merely function. Its like expecting high definition movies to look high-def in a 1980's TV set. Not going to happen. Trying to get a layout to work with modern techniques in old browsers is a waste of time.

The best you can hope for is to be semantic.

2. If your options in your select box can be that long as to prohibit setting a width, perhaps having the form box scroll is a better option.

3. Floating elements drop when there is not enough space to accommodate them. Since the sum of my divs' widths only allowed for 2% extra space for borders, margins and paddings as you make the window smaller there's less space for it. Reducing the width percentage of the divs can fix that. Yes the lighter gray div is actually an optical illusion. Its the wrapper div doing the work while the actual instructions div simply holds the text, but has no background.

You can also use the min-width option to specify just how small the wrapper div can get. Of course IE6 ignores this, and simply treats it as the set width.

I would like to know how to get divs to stop moving around on the screen w/o going to absolute positioning.

4. Not sure what you mean by this. A div stays where its put, unless its floated in which case it reacts to its surroundings. If there's not enough space to contain it it will drop to a new line if there's other things floated around it.
If they aren't floated or if they are but width can be guaranteed there's no movement. In more modern browsers min-width can help you maintain a minimum width so even the the browser is resized to extremes the website retains its look.

If you need to build for IE6 stick to simplistic layouts. Sadly IE6 is just not equipped to handle modern layout techniques.









----------------------------------
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/

 

[LarrySteele]

Interesting...

<!DOCTYPE HTML>
<html>
<head><title>C-Layout</title>
<style type="text/css">
#wrapper{
background-color:#dedede;
overflow:hidden;
}

#formBox{
width:20%;
/*margin-left:4px;*/
background-color:#bebebe;
float:left;
border-right:15px solid white;
}

#formBox p{
padding:8px;
}

#rightBox{
/*width:78%;*/
/*float:left;*/
overflow:auto;
}
#rightBox p{
margin:10px;
}


</style>
</head>
<body>
<div id="wrapper">
  <div id="formBox">
    <h2>Form goes here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis risus sed ligula porta in sodales est malesuada.</p>
  </div>
  <div id="rightBox">
  <h2>Instructions</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis risus sed ligula porta in sodales est malesuada. Ut ullamcorper diam ac enim feugiat vitae interdum mauris pretium. Maecenas nec elit ut augue malesuada rhoncus at egestas nunc. Vivamus lacinia rhoncus velit, vitae tristique tortor pretium in. Vestibulum sit amet orci laoreet tellus sodales commodo. Cras id bibendum mi. Aliquam erat volutpat. In volutpat gravida pretium. Duis condimentum tellus et est cursus rhoncus. Vivamus mattis, arcu sed adipiscing venenatis, orci nisl accumsan nibh, nec semper orci mi facilisis elit</p>
  </div>
</div>

</body>
</html>

I finally got the rightBox div to let the text wrap no matter how wide/narrow I made the browser window. Not only that, but both ~columns~ stay the same size, no matter which one has more vertical text.

Basically, I took a queue from

If they aren't floated ... there's no movement.

Removing the float and width from the rightBox div seems to have done the trick. Funny I hadn't seen that in any of the sites I had visited or in my books.

 

[vacunita]

Good going. However note that the second your instructions are longer than your form box the illusion goes out the window.



----------------------------------
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/