layout problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jimthunderbird
Forum Contributor
Posts: 147
Joined: Tue Jul 04, 2006 3:59 am
Location: San Francisco, CA

layout problem

Post 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
wyrmmage
Forum Commoner
Posts: 56
Joined: Sat Oct 28, 2006 12:43 pm
Location: boise, ID

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
wyrmmage
Forum Commoner
Posts: 56
Joined: Sat Oct 28, 2006 12:43 pm
Location: boise, ID

Post by wyrmmage »

heh, that was the code that I was looking for...I would go with the code that he provided :)
-wyrmmage
Post Reply