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.
-
if you look at my example the text (name,icon,model) are left aligned, while the counts (kids,siblings) are right aligned to the overall div.foobrad.v– brad.v2009年12月15日 21:36:52 +00:00Commented Dec 15, 2009 at 21:36
-
2You've likely been brainwashed too much with "tables are bad". They are only bad for layout, not for presentation of tabular data.BalusC– BalusC2009年12月15日 21:45:41 +00:00Commented Dec 15, 2009 at 21:45
-
I didn't feel that it is tabular data because it is only one row. trying to do it semantically correct rather then the fast and easy table markup (if there is a way).brad.v– brad.v2009年12月16日 02:50:07 +00:00Commented Dec 16, 2009 at 2:50
5 Answers 5
The white-space:nowrap style does prevent the "foo" divs from breaking, but I also found it caused them to blow out of the width defined in the "content" div.
I found the following worked in IE, Firefox, and Chrome (pc only, don't have access to a Mac just now)
div.foo
{
display:inline-block;
}
Comments
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.
3 Comments
display: table, table-cell, table-row, etc can be used to get the browser's table-layout properties without a semantic table (sadly, no IE 6 or 7 support for those.)To keep everything together, add this:
div.foo
{
white-space:nowrap;
}
1 Comment
white-space:nowrap;overflow:scroll ? Though I haven't tested that.So you have a bunch of divs, each containing some content, and you want them displayed next to each other, in a row?
.foo { float: left; }
will make them float to the left and they will all appear next to each other; each box shrink-wrapped to the minimum width needed.
2 Comments
This thread is viciously old but for anyone who may happen upon it...
The modern solution is to use a flexbox. It can get heavy but diverting load from the server (HTML generation) to the client (calculating flexbox or even JS) seems to be de rigeur these days, especially in order to maintain semantic readability. float works but efforts to make clearfix more than a persistent hack seem to have been deprecated in favor of CSS 3 solutions.
Try something like this:
.foo {
display: flex;
/* Plenty more options, consult a flexbox doc. */
}
.foo > * {
flex: 1 1 auto;
width: 20%; /* Equal widths, but easy to edit. */
}
You'd need to copy your link through to wrap individual elements (once again, heavier but more semantically correct) and you'd likely want to give each a separate class so you could target it in your stylesheet for a specific width, alignment, etc.
NOTE: I got here myself looking for the display: inline-block; and white-space: nowrap; answers because they suited my need more than the accepted answer.
Whether the data are semantically a table is philosophical and pedantic. I defer to the discussion above and the, "right," answer is a very gray area. New CSS also offers a CSS-based table model and if your sensibility leads you to a table being semantically mostly-correct but you don't want to rewrite as <table>, <tbody>, <tr>, and <td>, there's now a very good intermediate option. It would require shuffling your HTML but by the looks of the OP this is likely automatically generated so likely easy.