Having a heck of a time with getting this formatting correct so any ideas would be appreciated. we have a bunch of information pertaining to foos that we want to keep grouped together. So if we had a bunch of foos listed next to each other, if that element causes the foos to wrap, the entire foo would stay together. Also the formatting should look like: So the text is to the left and the numbers are to the right.
|-----------------------------------------------------|
|[icon] Brad (human) [pic] (2) [pic] (3)|
|-----------------------------------------------------|
So the main icon is leftmost then the name and model, and then right aligned is the siblings , and kids (with css embedded icons for each).
Each foo can have the following:
foo.id = 12345
foo.name = 'brad'
foo.model = 'human'
foo.image = ''
foo.kids = 3
foo.siblings = 2
foo.link = ''
–
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >
body
{
margin: 0;
padding: 0;
min-width: 850px;
text-align: left;
line-height: 28px;
font-size: 14px;
font-family: Verdana,Tahoma,Arial;
}
#content
{
width: 800px;
border: solid 1px #000000;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div.foo
{
display: inline;
min-width: 250px;
width: 250px;
border: dotted 1px #b8b8b8;
padding: 0px 15px 0px 0px;
vertical-align: middle;
}
.foo .id
{
display: none;
}
.foodata
{
display: inline;
text-align: left;
white-space: nowrap;
margin: 2px 2px 2px 2px;
}
.fooname
{
display: inline;
min-width: 80px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.foomodel
{
display: inline;
min-width: 80px;
color: #000000;
font-size: 12px;
}
.foocounts
{
min-width: 90px;
text-align: right;
display: inline;
}
.foosiblings
{ /* add in image for children */
background: url(../../images/siblings.png) no-repeat 4px 10%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fookids
{ /* add in image for connection */
background: url(../../images/kids.png) no-repeat 4px 25%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fooimage
{
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content" >
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Brad</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(3)</span>
<span class="fookids" >(2)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Tom</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(1)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Harry</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(6)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Sally</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Peggy</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(12)</span>
<span class="foosiblings" >(16)</span>
</span>
</a>
</div>
</div>
</body>
</html>The important part is I want to keep the entire foo together, in one big chunk since I use this structure all over the page. If needed the structure of the foo can change, I have complete control over it.
This is an example where tables are ‘allowed’ to be used. Because this is tabular data. Somewhat.
Doing everything in div is fine for layouts, but you’re actually listing things with rows and columns. That’s a table in my book.