I have an example page

<URL: http://parts.mopedepot.com/test/test1.html >

that uses tables for its layout.

<table>
<td>Space holder</td>
<td>Skip scroll bars, since those are "outside" my reserved space</td>
<td>Graphic image</td>
</table>

The parts list that shows on that page is placed there with absolute
positing. Anyone willing to give me pointers on how to change this over
to a CSS-based design? I tried making the image a "position:fixed" div,
but then I lost the scroll bars on my browser -- making that less than an
ideal solution.

Am I overlooking something obvious, like some sort of a 'no-break' option
for divs to keep them glued side by side? Or is there another approach I
should take?

Thanks!

Jeremy J Starcher <r3jjs@yahoo.com> writes:

> <URL: http://parts.mopedepot.com/test/test1.html >
>
> that uses tables for its layout.
>
> <table>
> <td>Space holder</td>
> <td>Skip scroll bars, since those are "outside" my reserved space</td>
> <td>Graphic image</td>
> </table>
>
> The parts list that shows on that page is placed there with absolute
> positing. Anyone willing to give me pointers on how to change this over
> to a CSS-based design? I tried making the image a "position:fixed" div,
> but then I lost the scroll bars on my browser -- making that less than an
> ideal solution.

position: fixed is rarely the solution for anything. It has very
limited use because of what it does to the element (it get taken out
of the normal flow).

> Am I overlooking something obvious, like some sort of a 'no-break' option
> for divs to keep them glued side by side? Or is there another approach I
> should take?

The most usual way to one thing beside another -- using CSS -- is to
float on of them. Often you float one think into the margin of the
other. This is how I'd tackle your situation. I'd keep the table of
parts as a table, of course, since it *is* a table but I would float
it left and ensure that the element that contains the image has a
margin wide enough to hold the table.

If your pages are such that the width of the table is more variable
than that of the images, you might want to do it the other way
round -- float the image right.

--
Ben.

On Fri, 04 Apr 2008 16:48:42 +0100, Ben Bacarisse wrote:

> Jeremy J Starcher <r3jjs@yahoo.com> writes:

[ Jeremy's summary snipped ]
>
> position: fixed is rarely the solution for anything. It has very
> limited use because of what it does to the element (it get taken out of
> the normal flow).
>
>> Am I overlooking something obvious, like some sort of a 'no-break'
>> option for divs to keep them glued side by side? Or is there another
>> approach I should take?
>
> The most usual way to one thing beside another -- using CSS -- is to
> float on of them. Often you float one think into the margin of the
> other.

Brilliant!

As you can tell, I'm still learning CSS. So far I've gotten by by
pretending margins and borders don't exist.

That gives me a good direction on where to start.

Thanks.