I am new to the CSS no tables thing and I have a question about a layout. Here is my pending layout:
What order should i write the div tags for this to work?
Should I combine 3 and 5 in a parent div and 4, 6 and 7 in a parent one as well?
Then maybe float 3 and 5 to the left?
Any help would be greatly appreciated.
It's a two column layout
It's a two column layout with header.
#0 is a wrapper / container
#1 is a header full width inside #0
#2 is a strapline/menu bar written after header
then you need a two column layout using floats, one side will be floated the other margined away from the float by it's width, you can choose to write these two in the source in any order depending what you want but generally the floated element is written first followed by the non floated one.
Then within left column you can divide it with #3 & #5 and in the right column sub divide it with #4, #6, and #7
Thanks a lot for the quick
Thanks a lot for the quick response.
I am an old table-centric guy and have spent the past 4 years doing back end programming and apparently missed a lot in the web design world. Just trying to get caught up on the times.
Of course, it depends
Of course, it depends whether any bits are fixed height or variable according to content, and whether any need attaching to the contant above or fixed to the bottom.
Let me explain.
Your picture appears to show elements 5 and 7 aligned at the bottom. If elements 1 and 2 are fixed height (logo bar and navbar?), that leaves elements 3 and 4 almost certainly variable height.
Let us assume that 7 is fixed height also. Maybe a copyright footer.
The only way 5 and 7 will align at the base is if the height of 3+5 is equal to 4+6+7. Highly unlikely given the vagueries of rendering by IE and FF.
IF you could bear 1,2,5,6 & 7 to be fixed height, 3& 4 could be variable and all others will align nicely, if done right. Also, if you want 3&4 fixed height, 5 & 6 could be variable.
Just a thought.
Thanks for the insight.
Thanks for the insight.
You are right about 1 and 2: fixed height. 3, 5 are going to be the only variable height elements in the design or so I've been leading myself to believe. I'll give this a go and if I have any more questions I'll definitely bring it up. The data for 4 and 6 is going to be database driven, but I think I'm just going to use set heights and overflow:auto for those guys. And 7 is a fixed contact info box.