|
Posted by Ben Bacarisse on April 4, 2008, 11:48 am
Please log in for more thread options
> <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.
| 
XML Sitemap