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
layout problem
Moderator: General Moderators
- jimthunderbird
- Forum Contributor
- Posts: 147
- Joined: Tue Jul 04, 2006 3:59 am
- Location: San Francisco, CA
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
-wyrmmage
If you would work with css (divs, no tables) you could use absolute positioning to get it to remain at the bottom. Like:
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.
Code: Select all
#parentelement {
position:relative;
}
#childelement {
position:absolute;
bottom:0;
left:0; // or any other value like 30px etc
}