Wed, 2004-05-05 05:18
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
Wed, 2004-05-05 07:40
#1
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
Wed, 2004-05-05 08:02
#2
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
[EDIT]: Tony crept in whilst I was writing this. I'm sooo slow 