wongJP

Hi there. I'm trying to do the simplest thing but somehow I can't figure it out ;_;

I'm trying to put two images side-by-side as if they were two columns in a table. Like so:

Image #1 is 100 pixels wide, 10 pixels high.
Image #2 is 130 x 130 with three lines of text below it. It currently wraps.

A table exists below the images.

Take a look at capture.hindsightproject.com (it's the graphic "Music" followed by the disc image and some text). I ripped the poor css and code out at the moment so I don't get confused in the morning.

I'm trying to figure out why I'm having such a hard time with something so basic. Then again, I come from the old school of creating everything with tables

I tried making a wrapper of some sort but that didn't help either. In fact it made the table below the two images (Powered by...) overlap the images in Firefox!

I'm going to sleep since its 4am, I think my brain is fried about something so simple

Dez

The easiest way to do this is to use the float property. This will literally make it "float" over the rest of the page. To stop overlapping, you need to give a margin to the non-floating area of the page equal to or more than the width of the floating object.

That all could just sound like technobabble to you, so here's an example:

<!-- This DIV will appear on the left -->
<div style="float:left; width:100px">
...
</div>

<!-- This DIV will appear on the right -->
<div style="margin-left:110px">
...
</div>

The first DIV is 100 pixels wide, and will be on the far left of the page. The second DIV will be 110px to the right of the first DIV, giving a 10-pixel margin between them. You can replace the DIVs with any tag you like, but if it is in-line by default (ie. images), you'll need to add display:block to its properties as well as the float/margin.

Hope this helps.