[Solved] Broken layout-Columns don't line up

You have missed some simple points, with floats you need to need to use some form of containing property for the parent element otherwise it doesn't expand with it's children if you put display:table on the #wrapper and a white background you will see what I mean and this will form the basis of the solution to the column heights or trying to keep the layout looking whole while actually expanding. You will need to employ tricks to create the illusion that the columns are continuous by using images repeated along y-axis or solid block color that is placed as an image the width of a column but placed on the element behind.

This is one of the problems I'm afraid when graphic designers decide to branch out ( Disclaimer: the following comments are not in anyway meant to offend ) It's easy to see designs as finished articles and that CSS/HTML are just secondary props for hanging a design on but nothing is further from the truth really. These two skills (CSS, HTML ) whilst seeming simple enough have hidden depths of complexity especially so CSS, and some work must be put into understanding and learning the skills needed to work effectively.

The nature of the three columns cause problems right away as height in CSS is meant to be fluid and really is it set nor are columnar heights ever actually equal in length (unless you want to take the easy way out and table-ise the layout).

You will need to be thinking of where you can run colour you may well need another div that holds the right hand orange colour as a graphic fixed width that's run along the right edge while the rest of the element is set to white to account for the centre section the left hand side could be handled by fading the green graphic into a solid colour the graphic remains to the top but as the height increases you will see more of the solid green towards the bottom in the same way the orange rounded corner is placed as a background to the right column.

Conversely a different approach could be to take a slice of the main body that starts to the outside edge of the green left column runs right across to the right outer edge of the orange column and that is say 4-5px high you then repeat that down a new div that wraps the three floats you will then always have equal height as the new inner wrapper will expand with whatever column is longest, your green graphic is then set as a background to the left column.

With graphics for decoration you should really place them always as backgrounds not foreground inline images as a background they are a little more flexible and inline images should be kept for informational photos. Always view a layout without any styling as you then see how odd decorative images look when displayed without CSS styling on their parent elements inline.

BTW if I didn't say so earlier it's a nice design!

Hugo-

Thank you so much! I think it is fixed! I put display:table on the wrapper and added a 5 pixel high background image repeating on the y axis that spans the entire layout and it works great (in Safari and Firefox anyway). I think there is a small glitch in IE where it puts that 5pixel image at the top of the content area but I'll try to figure that out next.

No offense taken on the whole designer issue at all. I get where you are coming from believe me, because the world of print is just so different.

This information is hard won and I really appreciate all your help and advice.

Thanks also for the compliment on the design.

Tom

That seems to be ok I think that was the best approach but as always with CSS they're are many routes one can take, I only looked superficially but will try and have a more detailed look a bit later, I can see you'll have fun with the links on the left , but then again maybe not you seemed to get this bit done quite rapidly.

I would appreciate the more detailed look very much. Please let me know what you think! As for the navigation on the side, well, I think I am going to try to use flash as the navigational engine so I can design some pretty rollovers.

Another can of worms entirely, I know!

Thanks again.

t