Page 1 of 1

layout problem

Posted: Fri Dec 01, 2006 10:06 pm
by jimthunderbird
Hi All,
Recently I created a three column table template here:
http://www.jimthethunderbird.com/htmlte ... olumn.html

I wish to make the light blue block always sit at the bottom no matter how high the mid column is. The width and height of this light blue block can not be changed since I need to place a background image on it later on.

I've been trying for some time but still got no hints...

Anyone can help?

Thank you very much.

With my best,
Jim

Posted: Sun Dec 03, 2006 10:16 pm
by wyrmmage
the best way to do this is by making two tables. The first table contains the pink, yellow, and dark blue columns, while the second table contains the light blue column. You can also do the same thing with <fieldset>'s, but I recommend tables because they are more consistent from browser to browser. I believe that you can also accomplish the same thing using CSS's "position: relative; location: bottom;". I don't know the exact syntax, but you should be able to get it if you fool around with it for awhile :)
-wyrmmage

Posted: Tue Dec 05, 2006 2:44 am
by matthijs
If you would work with css (divs, no tables) you could use absolute positioning to get it to remain at the bottom. Like:

Code: Select all

#parentelement {
  position:relative;
}
#childelement {
 position:absolute;
 bottom:0;
 left:0;  // or any other value like 30px etc
}
Only thing to watch out for is that absolutely positioned elements can overlap other elements in some situations, depending on the rest of the layout. So if in this case the box is 200px wide, you would need to give other elements inside the #parentelement a left margin of 200px to make sure that doesn't happen.

Posted: Tue Dec 05, 2006 12:22 pm
by wyrmmage
heh, that was the code that I was looking for...I would go with the code that he provided :)
-wyrmmage