Click here to get back home

Floating divs

 HomeNewsGroups | Search | About
 alt.www.webmaster    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Floating divs TK 06-10-2008
Posted by TK on June 10, 2008, 4:15 pm
Please log in for more thread options
I have a page http://www.coachksstrings.com/tennisgifts1.php with
borders around the div to show the problem. The items come from a
database and are sorted according the number of characters in the
description (ASC). The divs float past each other in most but not all
cases. If the end of a line of text ends in the beginning of a long
word, the text block can have an extra line. The tenth and eleventh
items show this problem. Ten has fewer characters but has a larger
footprint that eleven. This can result in a box snagging on the row
above and not floating left. Switch the width to four or two columns
and scroll down to see the problem. It does not happen at ten/eleven but
does farther down.

My wife inputs the description, previews, modifies until she has
eliminated all the snags but forgets to test in other than 1024 display.
If you play with the wording, you can change where the large word falls
preventing the problem. There must be a better solution.

--
TK
http://wejuggle2.com/
Still Having a Ball

Posted by Els on June 10, 2008, 4:27 pm
Please log in for more thread options
TK wrote:

[ http://www.coachksstrings.com/tennisgifts1.php ]

It happens when bold font is on two lines, making the lines higher
than the same amount of lines where only one line has bold characters.
Did you try setting the line-height to a value that is high enough for
bold text?

--
Els http://locusmeus.com/

Posted by TK on June 11, 2008, 8:19 am
Please log in for more thread options
Els wrote:
> TK wrote:
>
>> [ http://www.coachksstrings.com/tennisgifts1.php ]
>
> It happens when bold font is on two lines, making the lines higher
> than the same amount of lines where only one line has bold characters.
> Did you try setting the line-height to a value that is high enough for
> bold text?
>
I added another page which shows the problem a little more clearly.
http://www.coachksstrings.com/tennisgifts1a.php contains items number 10
to 12 with and without bold (I wish I had not shown her how to do that).

I did try p {line-height: 2em} which gave the same result. Wait, are
you saying to set the line-height for bold/normal text to different
values? That would eliminate some of the problems. I will play with that.
Thanks,

--
TK
http://wejuggle2.com/
Still Having a Ball

Posted by Els on June 11, 2008, 8:51 am
Please log in for more thread options
TK wrote:

> I added another page which shows the problem a little more clearly.
> http://www.coachksstrings.com/tennisgifts1a.php contains items number 10
> to 12 with and without bold (I wish I had not shown her how to do that).

You could be sneaky and set this in the stylesheet ;-)
b{font-weight:normal !important;}

> I did try p {line-height: 2em} which gave the same result. Wait, are
> you saying to set the line-height for bold/normal text to different
> values? That would eliminate some of the problems. I will play with that.

I didn't mean that actually - but it might be what is needed :-)
But it won't solve the problem with the text wrapping differently and
therefore creating more lines in items that appear before others.

When your wife is adding these items, could she perhaps add a class to
the divs as well? I'm thinking of classes like "lines2", "lines3",
"lines4" etc., based on how many characters. Or you could add them
dynamically, if possible. You could then set a (min-)height in ems for
those classes, in which of course you need to take into account one
extra line for the badly wrapped ones.

--
Els http://locusmeus.com/

Posted by TK on June 11, 2008, 4:14 pm
Please log in for more thread options
Els wrote:
> TK wrote:
>
>> I added another page which shows the problem a little more clearly.
>> http://www.coachksstrings.com/tennisgifts1a.php contains items number 10
>> to 12 with and without bold (I wish I had not shown her how to do that).
>
> You could be sneaky and set this in the stylesheet ;-)
> b{font-weight:normal !important;}

Today is my forty first wedding anniversary - following advice like that
probably will not get me through another 41 years ;-)

>
>> I did try p {line-height: 2em} which gave the same result. Wait, are
>> you saying to set the line-height for bold/normal text to different
>> values? That would eliminate some of the problems. I will play with that.
>
> I didn't mean that actually - but it might be what is needed :-)
> But it won't solve the problem with the text wrapping differently and
> therefore creating more lines in items that appear before others.
>
> When your wife is adding these items, could she perhaps add a class to
> the divs as well? I'm thinking of classes like "lines2", "lines3",
> "lines4" etc., based on how many characters. Or you could add them
> dynamically, if possible. You could then set a (min-)height in ems for
> those classes, in which of course you need to take into account one
> extra line for the badly wrapped ones.
>
At my current level of understanding, it would be much easier to
manually adjust the words that code that.
thanks,

--
TK
http://wejuggle2.com/
Still Having a Ball

Similar ThreadsPosted
IE bug with floating August 28, 2005, 5:49 am
DW : Menu floating February 16, 2006, 5:33 pm
Using divs for columns December 20, 2006, 7:23 am
overlaying divs March 3, 2007, 10:57 am
IE and CSS padding in divs March 30, 2007, 11:26 am
Matching height divs June 9, 2008, 3:32 pm
When using collapsing/expanding DIVs in IE6 container does not expand. May 31, 2008, 10:56 pm
controlling 2 floating objects side-by-side September 30, 2008, 11:51 am
2 Divs side-by-side causing me grief November 11, 2006, 4:57 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap