Vertical Align to Bottom

This is a discussion on "Vertical Align to Bottom" within the Web Page Design section. This forum, and the thread "Vertical Align to Bottom are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Jan 14th, 2007, 02:01
Reputable Member
Join Date: Jan 2004
Location: California
Age: 19
Posts: 232
Thanks: 0
Thanked 2 Times in 2 Posts
Vertical Align to Bottom

On this page: http://205.234.145.204/~nikes/catalog.shtml

I want to align the price and "buy it now" button to the bottom of the TD cell. I tried using valign="bottom", but it doesn't do anything.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Jan 14th, 2007, 10:41
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Vertical Align to Bottom

http://www.htmldog.com/reference/css...ertical-align/

I can't remember if this works in IE, though.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jan 14th, 2007, 11:35
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Vertical Align to Bottom

Hi Dane, I usually struggle with this as well. I just end up putting in another row and putting all my prices and buy now buttons in the new row. Then I'm sure they align all together across the page.

Peeked at the site.. looking good!!!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Jan 14th, 2007, 17:21
Reputable Member
Join Date: Jan 2004
Location: California
Age: 19
Posts: 232
Thanks: 0
Thanked 2 Times in 2 Posts
Re: Vertical Align to Bottom

Ryan, I already tried all those things. I think the reason why those dont work is because all the content is within one cell, and I want some of that content to stick at the top, and some of it to stick at the bottom, which doesn't work.

Lchad, that's what I was trying to do just now but the problem is that I am using cellspacing="10" and cellpadding="5" on the table, which makes two different cells separated with white lines. This is the table that separates each sneaker design. But, within each cell of that table, there is another table which, if only I could make the height=100%, which of course doesn't work, it would fill up the entire cell and everything would be lined up perfectly. Here is the code:

Quote:
<table width="700" border="0" cellspacing="10" cellpadding="5">
<tr>
<td width="50%" align="center" valign="top" class="boxed"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td rowspan="2" align="center" bgcolor="#001A3A" ><a href="gallery/spongebig.jpg"><img src="gallery/sponge.jpg" width="183" height="137" border="2" /></a></td>
<td align="center" bgcolor="#001A3A"><a href="gallery/sponge1big.jpg"><img src="gallery/sponge1.jpg" alt="sponge" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#001A3A"><a href="gallery/sponge2big.jpg"><img src="gallery/sponge2.jpg" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td colspan="2"><img src="gallery/spongetext.gif" width="310" height="35" /> <br />
<br />
<span class="style2">$99.99 </span> <a href="buyit.shtml"><img src="buyit.gif" width="150" height="40" border="0" /></a></td>
</tr>
</table></td>
<td width="50%" align="center" valign="top" class="boxed"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td rowspan="2" align="center" bgcolor="#001A3A" ><a href="gallery/bezzlebig.jpg"><img src="gallery/bezzle.jpg" width="183" height="137" border="2" /></a></td>
<td align="center" bgcolor="#001A3A"><a href="gallery/bezzle1big.jpg"><img src="gallery/bezzle1.jpg" alt="sponge" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#001A3A"><a href="gallery/bezzle2big.jpg"><img src="gallery/bezzle2.jpg" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td colspan="2"><img src="gallery/bezzletext.gif" width="310" height="45" /> <br />
<br />
<span class="style2">$109.99 </span> <a href="buyit.shtml"><img src="buyit.gif" width="150" height="40" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="50%" align="center" valign="top" class="boxed"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td rowspan="2" align="center" bgcolor="#001A3A" ><a href="gallery/casperbig.jpg"><img src="gallery/casper.jpg" width="183" height="137" border="2" /></a></td>
<td align="center" bgcolor="#001A3A"><a href="gallery/casper1big.jpg"><img src="gallery/casper1.jpg" alt="sponge" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#001A3A"><a href="gallery/casper2big.jpg"><img src="gallery/casper2.jpg" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td colspan="2"><img src="gallery/caspertext.gif" width="310" height="58" /> <br />
<br />
<span class="style2">$149.99 </span> <a href="buyit.shtml"><img src="buyit.gif" width="150" height="40" border="0" /></a></td>
</tr>
</table></td>
<td align="center" valign="top" class="boxed"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td rowspan="2" align="center" bgcolor="#001A3A" ><a href="gallery/tweetybig.jpg"><img src="gallery/tweety.jpg" width="183" height="137" border="2" /></a></td>
<td align="center" bgcolor="#001A3A"><a href="gallery/tweety1big.jpg"><img src="gallery/tweety1.jpg" alt="sponge" width="75" height="56" border="2" /></a></td>
</tr>
<tr>
<td align="center" bgcolor="#001A3A"><a href="gallery/tweety2big.jpg"><img src="gallery/tweety2.jpg" width="56" height="75" border="2" /></a></td>
</tr>
<tr>
<td colspan="2"><img src="gallery/tweetytext.gif" width="310" height="74" /> <br />
<br />
<span class="style2">$119.99 </span> <a href="buyit.shtml"><img src="buyit.gif" width="150" height="40" border="0" /></a></td>
</tr>
</table></td>
</tr>
</table>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jan 14th, 2007, 17:44
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Vertical Align to Bottom

Personally, I think you should rethink your layout methods.

You are using tables as a layout tool which is not what they were intended for and yours is hopelessly complex. Tables inside tables inside divs inside tables...

You could do this with a fraction of the layout complexity you currently have using divs and the proper application of css. There are plenty of people here to help you if you give it a go.

Oh, and put all your css in a seperate file which you <link... into your main pages.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Jan 14th, 2007, 17:54
Reputable Member
Join Date: Jan 2004
Location: California
Age: 19
Posts: 232
Thanks: 0
Thanked 2 Times in 2 Posts
Re: Vertical Align to Bottom

This is one thing Im certain would be a lot more difficult in CSS. What I am doing here is tabular data, lots of repetitive cells. It's nice of you to critique my code, but I am looking for a quick fix that I have logically not seen yet using what I have here. Maybe something along the lines of taking out a cell, inserting a cell, splitting a cell, etc. etc. NOT "change the whole thing to CSS"
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Jan 15th, 2007, 00:35
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Vertical Align to Bottom

You can try using positioning, but it is really a bad way to do it. I'm afraid this is one of those things that no one has come up with an easy solution. And that is not tabular data.

You're putting yourself between a rock and a hard stone here, Dane. Most people who know CSS don't use it with tables because it's an absurd idea. I just wish you'd realize that we are being extremely helpful. You just won't hear it because you're looking for nothing but a "quick fix" and too stubborn to get out of your rut.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Jan 16th, 2007, 15:36
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: Vertical Align to Bottom

Maybe I am way off here but don;t the TD's have a specified height? Couldn't you just use padding or margin on the stuff?
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
valign

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical Text Align Biddlesby Web Page Design 1 Mar 13th, 2008 22:39
CSS Vertical Menu. Can someone help? CoolNeb Web Page Design 3 Jul 16th, 2007 18:00
Div Vertical Align jwalker80 Web Page Design 5 Jan 30th, 2007 23:34
align text to bottom of div? JETshipJUMBO Web Page Design 9 Aug 6th, 2006 07:29
vertical-align problems with inline elem. and floated elem. gogogadgetearl Web Page Design 2 Jun 3rd, 2005 18:55


All times are GMT. The time now is 08:05.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42