[RESOLVED] float and wrap

[bokeh]

Here's the page! (http://prueba.revistafoto.es/indice-de-foto-forum.php)

I have a list of names and dates. Sometimes one name has more than one date associated with itself and if this is the case it wraps below the the name which is in a float. How do I stop the dates wrapping under the float?

Here's the css

#indice-de-foto-forum ul{
margin:0 10px;
padding:0;
}

#indice-de-foto-forum li{
list-style:none;
margin: 0;
padding:0.4em 0 0.8em 0;
clear:both;
font-size:x-small;
color:#3a3a3a;
}

#indice-de-foto-forum li a{
font-weight:bold;
color:#369;
text-decoration:none;
font-size:medium;
padding:0.5em 0.2em 0 0.2em;
float:left;
}

#indice-de-foto-forum li a:hover{
color:#f63;
}

#indice-de-foto-forum li span.float{
font-weight:bold;
float:left;
width: 28em;
font-size:small;
}

#indice-de-foto-forum li.uno{
background:#eee;
}And here is a list item<li><span class="float">Abril Fern&aacute;ndez, Rogelio </span>2/03:87</li>

[KDLA]

Nice layout!

Would switching the float/li help? Having the dates float left, rather than the names? Seems that the names would be more consistent in width, than the lists of dates/times; thus easier to control width-wise.

KDLA

[bokeh]

I can see where you are coming from but, if the dates were in the float, when the float started to expand vertically it would perform different in IE and in firefox. In IE the <li> would expand with the float but in firefox it would not (correct behaviour). Even though the next <li> is clear:both; there is another problem: the background colour of the <li> would not expand to contain the float.

[WebJoel]

Not related to the current request, but there is a very small problem here: a missing "<ul>" which, in it's absence, throws two additional warnings.

<!-- start changeable content -->
<div id="changeable">
<div id="indice-de-foto-forum">
<h2>&Iacute;ndice de FOTO/Forum</h2>
<ul>
<li id="A" class="indice">
<a href='#A'>a</a>
<a href='#B'>b</a>....(etc.)

[bokeh]

I hadn't noticed that. I've got a similar page with 3 times as many list items (approx 3000) and it has speeded up rendering of that page massively.

[Jayhawk]

When I have a similar issue the only way I have found to solve it is something like this:

<div class="column of names" style="width:300px">
<div class="names" style="width:150px">
Person's Name
</div>
<div class="date" style="width:145px">
6/06:85
</div>
<div class="names" style="width:150px">
Person's Name
</div>
<div class="date" style="width:145px">
6/06:85
</div>
...etcetera
</div>

Depending on the exact styles and sizes you may or may not need to float, but, and the above is really really generic, but you get the idea.

Or you could use a table, and this I think counts as tabular data so that would not really be inappropriate.

[wamboid]

Not tested, but how about something like this:

<li><span class="float">Abril Fern&aacute;ndez, Rogelio </span><span class="float">2/03:87</span></li>

Just a guess.

<edit>Now tested a bit. I think it looked right in ie, but not ff. sorry.</edit>

[toicontien]

Why not the markup below?

<table cellpadding="0" cellspacing="0" border="0" class="memberTable">
<thead>
<tr>
<th id="th_name">Member Name</th>
<th id="th_date">Date Joined</th>
</tr>
</thead>
<tbody>
<tr class="[rowA|rowB]">
<td headers="th_name" class="memName"><strong>Name Here</strong></td>
<td headers="th_date" class="memDate">Date Here</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Member Name</th>
<th>Date Joined</th>
</tr>
</tfoot>
</table>

And this CSS?

.memberTable .rowA td {
background-color: #fff;
}

.memberTable .rowB td {
background-color: #ccc;
}

.memberTable td {
vertical-align: top;
}

.memberTable tfoot,
.memberTable thead {
display: none;
}

.memDate {
font-size: .8em;
}

That list seems to be like tabular data? It belongs in a table, which solves your layout problem too.

[bokeh]

Why not the markup below?Because its a table and I don't consider using a table to style a list an appropriate use! With my code below if you remove the stylesheet you are left with... yes... you've guessed it... a list which after all is what this is.

One of my rule is if I use a table the cell wals must be displayed. That way I know the table is being used in its native context.

This is what I used in the end.<li class="uno"><span class="block">Balaguer Martorell, Antonio </span>4/98:12</li>
#indice-de-foto-forum ul{
margin:0 10px;
padding:0;
}

#indice-de-foto-forum li{
list-style:none;
margin: 0;
padding:0.6em 0 0.8em 32em;
clear:both;
font-size:x-small;
color:#3a3a3a;
position:relative;
/* for IE hasLayout bug */
display:inline-block;
}

#indice-de-foto-forum li.indice{
padding:0.4em 0 0 0;
}

#indice-de-foto-forum li a{
font-weight:bold;
color:#369;
text-decoration:none;
font-size:medium;
padding:0.5em 0.4em 1em 0;
float:left;
}

#indice-de-foto-forum li a:hover{
color:#f63;
}

#indice-de-foto-forum li span.block{
display:block;
position:absolute;
margin:0;
top:0.4em;
left:0.3em;
font-weight:bold;
font-size:small;
width:100%;
text-align:left;
}

#indice-de-foto-forum li.uno{
background:#eee;
}