View Full Version : CSS to position image at bottom, right of table cell

02-24-2005, 02:02 PM
I have this table cell with the following code (just disregard the PHP):

<td valign="top" style="border:1px solid #000000">

<div style="float:left"><IMG SRC="AS700_2.jpg" class="products"></div>

<div><span style="font-weight:bold">Monitor -</span><span class="product_text1"> NEC AS700 17" CRT Monitor.<br><br>Price</span><span class="price"> $144.45</span><br><span class="product_text1">Part# MMMR-MR0125</span></div>

<div style="float:right">


<form method="post" action="<?

if (isset($_SESSION['username']))
echo 'shopping_cart.php#product_block';
echo 'sign_in_component.php#product_block';

?>" style="margin:0">
<input type="hidden" name="product_ID" value="MMMR-MR0125">
<input type="image" src="cart2.jpg" valign="middle"></form>


As you can see, I'm using a series of <br>'s to get the cart2.jpg image to appear at the bottom of the cell, but there has to be a better way to do this using CSS...But, I can't figure out how...

Any help, please?


02-24-2005, 02:40 PM
Personally, it would help if you could supply either a live, online example, or a screen shot of this piece of the page; I've got the feeling your approach is a bit overcomplicated, and I can't really picture what it should look like.

02-24-2005, 07:59 PM
Sorry, here's a link to the page with this code:



02-24-2005, 11:40 PM
The easy way: Since the image is in a form nested in a div, add margin to the top of the div to scoot it into place.

02-25-2005, 01:54 AM
I thought about that, but I hate to use CSS margins to "scoot" things into place, because I always run into problems with browser (IE vs. FF) inconsistancies (when I use margin).....is there any other way?


02-25-2005, 01:56 AM
Relative or absolute positioning.

You can do a number of things, really. Just apply the style to either the div holding the form or get rid of the div and apply it to the form holding the image.

As far as browser inconsistencies, welcome to the club :D

02-25-2005, 09:33 AM
I concur with Richard on the absolute positioning; if you want to make sure the add-to-cart form thingy is allways in the bottom right corner of the table cell, you'd be best off positioning it there. You have to make sure, though, that there's always enough room for it by adding a sufficient amount of bottom margin on the last element in the normal flow.

Concerning the rest of the markup: You really don't need to enclose the image in a div; it can be floated perfectly on its own. Floating should make behave like it a block level element, but you can set it to "display: block;" just to be sure so you can add some margin to push the text away.

The text itself can sit in a paragraph and again need not be in a div; the inline header can easily be created using a header element set to "display: inline;"; price and part number could be in an unordered list, but maybe that's stretching it. It would be semantically richer then spans, though.
The form element already is a block level element and can be positioned as is, again without a div. The table cell needs to be made relative for the abs pos to work.

set to "display: inline;" Make that: "set to 'float:left;' "; the inline idea sucked, but the float works great. I've got a working example with a dl for the price and part#, and not a single div. I can't put it online somewhere, but if you're interested I'll be happy to post the markup and styles in here.