Can I avoid specifying width when using floats?

[Terry]

I'd like to build a table-less layout for a very simple page.
The layout should look a bit like this (view with fixed font)

+-------------+ ID: 2984884
| | Last Name: Doe
| | First Name: John
| (picture) | DOB: 1999-11-11
| | City: Pasadena
| | Job Desc: Manager in charge of the restructuring
+-------------+ project for our west coast client
Last visit: 2003-12-12
Favorite color: blue
Car: Honda
Shoe size: 8
Postal code: 12345
Other stuff: Whatever
For the life of me, I cannot figure out how to this with CSS -- all
the examples I've seen specify a width for at least one of the two
DIVS. Problem is, I do not know that at design time! The images and
text in the database vary wildly. Plus, how can I prevent the text
from sneaking under the first DIV anyway??

I hope someone out there can help me. TIA.

[Spartanicus]

Terry wrote:

I'd like to build a table-less layout for a very simple page.
The layout should look a bit like this (view with fixed font)

+-------------+ ID: 2984884
| | Last Name: Doe
| | First Name: John
| (picture) | DOB: 1999-11-11
| | City: Pasadena
| | Job Desc: Manager in charge of the restructuring
+-------------+ project for our west coast client
Last visit: 2003-12-12
Favorite color: blue
Car: Honda
Shoe size: 8
Postal code: 12345
Other stuff: Whatever
Since the picture and the personal data are related, they are tabular
data, hence the use of a table to mark it up is appropriate.
For the life of me, I cannot figure out how to this with CSS -- all
the examples I've seen specify a width for at least one of the two
DIVS.
For a non table markup you'd need only 1 div, div's by default have a
width of 100%, so to get a div to share horizontal space with something
else you'd need to alter the default width.
Problem is, I do not know that at design time! The images and
text in the database vary wildly.
Tables use a shrink to fit algorithm.
Plus, how can I prevent the text
from sneaking under the first DIV anyway??

Should not happen unless you float the image.

--
Spartanicus

[Neal]

"Terry" <a1*****@yahoo.com> wrote in message
news:7a**************************@posting.google.c om...

For the life of me, I cannot figure out how to this with CSS -- all the examples I've seen specify a width for at least one of the two DIVS. Problem is, I do not know that at design time! The images and text in the database vary wildly. Plus, how can I prevent the text from sneaking under the first DIV anyway??

Without a table: if there is truly "wild" variation in width,
you're going to run into difficulties if some images are so wide
the viewport cannot handle both the image and a reasonable block
of text side-by-side. Perhaps this is a case where you might set
a standard width as an attribute for the img in the HTML. As much
as it goes against my instincts, this *would* allow you to make
all the pics a uniform width, the aspect should remain the same,
and the width of the div parent to the img could be set.

Be sure you set a width that will not distort smaller images
grossly.

[Brian]

Terry wrote:

I'd like to build a table-less layout for a very simple page.
Getting rid of tables for layout is a good choice. But *do* use tables
for tabular data.
ID: 2984884
Last Name: Doe
First Name: John
DOB: 1999-11-11

[rest of data snipped]

This is tabular data. The first part is the row header, the second is
table data. Put the photo outside of the table (it has no natural
table header, and doesn't look like it should be part of the table).
Use a div to group the table and photo together.

<div class="personel">

<img src="doejohn.jpeg" alt="John Doe">

<table>
<tr>
<th>ID</th><td>2984884</td>
</tr>
<tr>
<th>Last Name</th><td>Doe</td>
</tr>
<!-- etc. -->
</table>

</div>

The photo has an intrinsic width, so you could simply float it left.
..personel img { float: left }

--
Brian
follow the directions in my address to email me

[Terry]

Thanks to all for your input -- I finally went with a table, reading
Spartanicus' logic seemed to make good sense to me. And I'll save all
other techniques for future dev. Thanks again.