2 replies [Last post]
samf
samf's picture
Offline
Enthusiast
Los Angeles, CA
Last seen: 10 years 1 week ago
Los Angeles, CA
Timezone: GMT-5
Joined: 2003-09-29
Posts: 106
Points: 34

I must say I'm very impressed with you guys' layouts. I have a layout for my new site at http://www.relatebase.com/ which uses all tables. Notice the top stays on the top, footer stays on bottom (which'd be obvious if there was less text, try clicking on services to see what I mean.

So I'd like to start on something simple. How would it be possible to have a top region that sticks to the top, a bottom region that sticks to the bottom, and a middle region which "floats" based on the browser height.

This simple question should get me started; I can handle the left alignment without a problem.

Thanks,
Sam

Life is complex -- don't make it complicated. If you need help with PHP visit PHP Builder

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Vertical Alignment with DIV's only (no tables)

Hi samf,
The only real problem with what you ask is the footer and if that is a problem depends on your definition of bottom.
All browsers seem to handle it differently.
If you mean below all the other content then you should be fine with three divs first one for the header then the content followed by the footer.
You don't need to do anything fancy by default the div's will fill 100% and position themselves after each other.
You should then have a simple fluid design.

Hope that helps

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Vertical Alignment with DIV's only (no tables)

As long as you set out to design the layout with the simplest code as possible, then you'll find things easier. By simple, I mean, don't start out be absolute positioning (or relative) until you got to the point that you really need to.

Your site should be fairly simple. You'll have a few hurdles to jump concerning the footer positioning, but there's plenty of documentation on how to get them positioned correctly.

Your header would be the first element in your body code. You can use a div with the necessary height (such as 150px or whatever). Divs naturally stretch to 100% width of the space they occupy. So, your header CSS could look like:

div#header
{
height: 150px;
background-color: #ccc;
}

I've added the background color simply so you can see what you're working with. You can add the logo image inside it. The html would look like:

<div id="header">
<img src="logo.gif" alt="RelateBase Services" />
</div>

Use padding on the header div's css to position the logo.

Secondly, the horizontal navigation could be done with a horizontal unordered list/def list/ or other means of making horizontal navs without tables. Check out this list tutorial: http://css.maxdesign.com.au/listamatic/

Your main content can be placed into another div, titled content. This, again, will be as minimal as you need. Such as:

div#content
{
padding: 25px 10px;
}

Finally, the footer. Here's an ALA article about the pitfalls and workarounds for footers: http://www.alistapart.com/articles/footers/

Here's an example I've knocked up for you. I've generalised loosely based on your needs, with obvious omissions. The footer, I've left as a simply one.

http://pub.c-o2.net/cssf/samf.htm

Smile

[EDIT]: Tony crept in whilst I was writing this. I'm sooo slow Wink Smile

The next sentence is true. The previous sentence is false. Discuss...