Hi,

Having a day free to learn i decided to have a go at a tableless web page and have been having a frustrating time with it and have hit a few problems.

Virtical-align
I have a header div that has three div's inside it, all 3 have images in the div's the first is our company logo, the second has two images with links to other language versions and the third is a banner. I have been trying to get the virtical-align to work but with no success. So far the suggestions I have got have been to make the images a single image and use an image map, but this kind of sucks. The second suggestion was to use a table but this defetes the goal of a tableless webpage.

Fluid div heights
I also have two div's side by side and wish to have the bottom of the div's match each other as they have borders, I am sure you can use height, but the text will change often and I would then have to work out the height every time.

I have not put all the css into my style sheet yet as I was finding it easier whilst learning to use the style in the div.

my original page is http://www.rodmatic.com/index.asp
the new page is http://www.rodmatic.com/index2.asp

I am also finding it hard work to get the page to look the same in dreamwever, ie 7 and also firefox. Dreamweaver seams to but dashed boarders round the div in the preview which kind of sucks when you are trying to get borders to look right.

Day one of css tableless webpage Auuuuuuuuuugggggggh

You might want to try Faux Columns for the second problem.

I'm not sure want you want to due with the vertical alignment? You should just be able to use a little padding to bump things around to align them. That sounds like the easiest decision. Also, the banner just looks like a bunch of photos to me. You could even eliminate that division totally, and then set that banner image as the background of the header div.

They look very similar to me, but I can see a little bit of "sloppiness" in the CSS layout.

I agree with Tom, that you should use margins/padding instead of vAlign to get things where you want.

Vertical align does NOT work the same way that it would for tables, at least not for what you're trying to achieve. LN is on track with the margin and padding to align the header sections.

I agree on the faux columns method, it will save you a LOT of headaches, I use it all the time

I am also finding it hard work to get the page to look the same in dreamwever, ie 7 and also firefox. Dreamweaver seams to but dashed boarders round the div in the preview which kind of sucks when you are trying to get borders to look right.

The problem there is that DW 7 uses a VERY OLD version of IE as it's internal preview, I think it's actually IE 5.0 !!! As with all versions of IE 6 and below, it is chock full of BUGS. Don't rely on the DW preview, just preview in the various browsers.

A few comments on the code:
DUMP the <center> tag, it's deprecated and you shouldn't use it if you're going to use CSS. For text like "Small run highly complex components", use a proper HEADING - h1 - h6, and style the Hx in your CSS. That is where you give it color, alignment, size, etc.

Same goes for the <p align="justify">. Since it looks like all your text is justified, just set the <p> to be justifed in your css:

p{
text-align: justify;
font-size: 80%;
}

I would also urge you to give your divs ID or Classes.

For your first shot at this, you've done a pretty darn good job. Keep up the good work