4 replies [Last post]
essdog
essdog's picture
Offline
newbie
Last seen: 13 years 39 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Hi there,

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.

Thanks Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

essdog
essdog's picture
Offline
newbie
Last seen: 13 years 39 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Thanks a lot for the quick

Thanks a lot for the quick response. Smile

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.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

Trevor

essdog
essdog's picture
Offline
newbie
Last seen: 13 years 39 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

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.