Tables vs DIVs? (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

TravelswCharlie -> Tables vs DIVs? (3/25/2008 0:58:31)


Is it possible to create a "flexible" rather than a "fixed" screen width with DIVs?

My website was built with tables, and it has the flexible screen width I want, but I can't do the same thing with DIVs.

I have three columns, with content in the middle, ads in the left column, and a navigation bar in the right column.

It's designed to take advantage of a large monitor, but re-size so that even on a cell-phone size monitor, the display adjusts to fit the monitor width so it is possible to read (each column) without scrolling.

Since tables are not recommended by the W3C validators, I've tried to switch to DIVs, but have not been able to create the same flexible screen width with DIVs.

I can get the middle column to be flexible, but as soon as I start adding a banner and other columns, it becomes fixed and it is necessary to scroll to see the whole column.

I've looked at a lot of sample websites and all I've seen are fixed-width, so I'm beginning to wonder if I'm trying to do what is not possible.

Can anyone tell me what I need to do?

Here is a sample page of my website:

http://www.campingandrving.com/tables_layout.htm

Thanks for any help.

CJ



Tailslide -> RE: Tables vs DIVs? (3/25/2008 3:50:57)

Sure - most of my sites are flexible now - including my own (those that aren't flexible are usually now elastic) and they're all created with divs.

2 column flexible designs are easy peasy - just float two divs next to each other, within a constraining outer div to hold them together. Above the 2 floating divs are a header div and underneath them is a footer (with clear:both to force it past the two floating divs). That's pretty much that.

3 column flexible designs are harder but I do them quite a bit. Again, constraining outer div. Then two inner divs floated the same way to prevent IE div drop. Then within the larger of the two floated divs you've got 2 more floated divs next to each other - thus the overall effect is 3 columns. Same thing with the footer after them.

There's another way to do it - using negative margins, which is popular too - more information can be found on this guy's site: http://www.pmob.co.uk/

Here's a gallery dedicated to CSS designs with flexible layouts: http://www.cssliquid.com/about/

There's several points to remember:

1. Always ensure that your code is valid when using CSS layouts - otherwise it's just too difficult to do!
2. Flexible is good BUT you do need to constrain the design as an enormously wide chunk of text is very hard to read (so use max/min width for modern browsers and IE expressions to achieve the same effect in IE6 and under).
3. For flexible you really need to use percentages for the widths. Be aware that you get better results using even numbers for the % and also that IE can't add up so you often need to add "display:inline" into the various div rules to get IE to behave.
4. Get the layout to work first - then add stuff in. And keep checking as you go along.
5. Use Faux column techniques to apply background images to these layouts and to fake equal length column looks
6. Obviously you have to think laterally about banner images - use background images with an "actual" logo image in the markup itself on top to achieve the flexible banner effect (see what others do).



TravelswCharlie -> RE: Tables vs DIVs? (3/25/2008 14:25:06)

Tailslide, thank you!

You gave me exactly the info I was needing.

I had spent hours Googling, but couldn't get the search terms right, and would be presented with thousands of hits from commercial website builders, so much that it was impossible to sort the useful from the sales pitches.

A sample at http://www.pmob.co.uk/temp/3colfixedtest_4.htm appears to be exactly what I need... and it even validates under DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"!

I'm pretty sure that is IT, but before I start, I will go through his tutorials and instructions.

In the meantime, following your suggestion to make the text a little tighter, I increased the size of the photos, to cause the line lengths of the text to shrink a little.

I turned on the "includes", so it is now possible to see the whole test page and how it fits together.

I also put my Home page back together... which I had messed up pretty badly when I was trying to figure out how to use DWTs.

You can see my test page and my home page here:

http://www.campingandrving.com/tables_layout_larger_photos.htm

http://www.campingandrving.com/index.htm

The home page looks pretty much as I want it to look now... at least with the minimum amount of testing I've been able to do.

The thing left is to find a nice Banner... can you direct me to a source? I've had the same luck there that I had in finding a sample "fluid" web page... too many hits.

While I can "create" my own, it LOOKS like I created it myself, and I'd like to find something a little more professional.

Again, THANK YOU!

CJ



Tailslide -> RE: Tables vs DIVs? (3/26/2008 3:46:28)

Well what I'd do is go to istockphoto.com and find some pretty photos - just search for RV or Caravan or Motorhome or whatever.

You don't need to do anything too fancy - maybe just a 100% width bar with a nice gradient on the background image (which you can then repeat horizontally across the page) and sit a pretty photo on top of that within the HTML along with "Camping & RVing" .

You don't necessarily need to have a photo image that goes 100% of the width - if you see what I mean.




mtfm -> RE: Tables vs DIVs? (3/26/2008 12:22:09)

On a semi-related note, I just wanted to say I like the pmob site. Very nice.

Even though I have been messing about with CSS for some time now it shows some different uses and is well-explained.



TravelswCharlie -> RE: Tables vs DIVs? (3/27/2008 17:44:41)

OH... ok, I think I see what you mean now.

I have tried to use a photo, but I couldn't get it right.

I can't justify the cost of PhotoShop, and I haven't found anything else that will optimize a photo for web page and do a good job.

Microsoft Office Picture Manager creates a nice image, but it does only one size... one that doesn't go acroos the page.

I guess I can use the shorter photo and just have it fade into the background of a gradient image... is that what you meant?

Thanks!





Tailslide -> RE: Tables vs DIVs? (3/27/2008 18:09:38)

That's exactly what I mean. Either use an image as a background image that you can repeat (e.g. something simple like a thin gradient) or use a fading image that at it's widest width will still fit on the page without causing a scrollbar at 800px (e.g. around 760px)

I'm way too tight to lay out for PS but I do use Photoshop Elements which is a fraction of the price and excellent for doing exactly this sort of thing. There's also the GIMP which is free and quite powerful but very un-user friendly.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125