|
Posted by Chris F.A. Johnson on 08/18/06 19:55
On 2006-08-18, Ted O'Connor wrote:
> I have a layout that uses a bunch of nested tables and it takes forever
> to render when there is a lot of data. Is there any way to do the
> following with an identical visual result without tables?
There is no such thing as 'identical visual result' on all browsers,
with ot without tables.
><table width="100%">
> <tr>
> <td><img ... /></td>
> <td width="100%">
> <table><tr><td width="100%">Text 1</td><td><img
You want a cell to take up all the available width, and then you
want to put another one beside it?
> .../></td></tr></table>
> </td>
> </tr>
> ... (have 100's of these TRs)
></table>
>
> Layout Requirements:
> - all first images must align vertically and be left justified
> - all second images must align vertically and be completely right
> justified
> - all contents of outer TR must be inline (no line breaks)
> - TD with text must take up as much horizontal space as possible
> - need some element that contains just the text and 2nd image (like
> the inner table does now)
>
> When I try to switch to just DIVs I can't get 2nd image to right align
> and text element to take up all available horizontal space. This must
> work in IE and FF.
A URL showing exactly what you mean would be helpful.
Do you mean something like this:
<html><head><title></title>
<style type="text/css">
.one { float: left; }
.two { float: right; }
div { clear: both; }
</style>
</head>
<body>
<div>
<img class="one" src="a.jpg" alt="">
<img class="two" src="b.jpg" alt="">
This is text in between.
</div>
<div>
<img class="one" src="c.jpg" alt="">
<img class="two" src="d.jpg" alt="">
This is text in between.
</div>
</body>
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
[Back to original message]
|