By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,396 Members | 1,476 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,396 IT Pros & Developers. It's quick & easy.

Floating div drops with long text in Firefox (CSS Issue)

rblaettler
P: 11
I have two div's with a float:left attribute that I've put into a list. They should align horizontally, which they do as long as the text in them does not need to be wrapped. As soon as the area for the float gets too small, IE wraps the text, but FF drops the div below the other before it starts to wrap the text. This is not exactly what I want. I could use absolute positioning, but that leads to other issues and is not really what I wanna do anyway. The simplified example page is below and core code too:

http://remy.supertext.ch/uploads/floatproblem.html

You can see the effect if you narrow the Window in FF and in IE. It works in IE7 as expected.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.  
  3. ul.GenericList
  4. {
  5.     list-style: none;
  6.     width: 100%;
  7. }
  8.  
  9. ul.GenericList li
  10. {
  11.     clear:both;
  12.     width: 100%;
  13. }
  14.  
  15.  
  16. ul.GenericList div
  17. {
  18.     float: left;
  19. }
  20.  
  21. </style>
  22.  
  23. <ul class="GenericList">
  24.     <li style="">
  25.             <div >
  26.                 <div style="background-color:Yellow;">Test</div>
  27.                 <div style="background-color:Aqua;">
  28.                     <b>Short Text</b><br />
  29.                 </div>
  30.             </div>
  31.     </li>
  32.     <li style="">
  33.             <div >
  34.                 <div style="background-color:Yellow;">Test</div>
  35.                 <div style="background-color:Aqua;">
  36.                     <b>Short Text</b><br />
  37.                 </div>
  38.             </div>
  39.     </li>
  40.     <li style="">
  41.             <div >
  42.                 <div style="background-color:Yellow;">Test</div>
  43.                 <div style="background-color:Aqua;">
  44.                     <b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
  45.                 </div>
  46.             </div>
  47.     </li>
  48. </ul>
Any ideas?
Oct 15 '08 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
As usual, IE is wrong. Never use IE as a reference for how things should work.

You've set the <li> as 100% width. When you narrow it down, it has to make things fit inside so it drops the text to the next line. What IE is doing is a bug in IE.
Oct 15 '08 #2

Expert 100+
P: 397
http://remy.supertext.ch/uploads/floatproblem.html
You can see the effect if you narrow the Window in FF and in IE. It works in IE7 as expected.
The IEs get it wrong.Code to compliant browsers. Fix the IEs.

The construct of the division needs to be changed [1]. The list is not needed and is extraneous and unnecessary markup-- that is, unless of course, I have completely misunderstood what you're trying to accomplish.
[1] Plese see amended division construct
PS
Given the uri is provided, as yours was, it is not necessary to post the code to the forum-- anyone can open the document to view the markup and css. More important, validate your markup before posting a question about (x)html/css. Thanks.
Oct 15 '08 #3

rblaettler
P: 11
Sorry about the validation. I just quickly put together a simplyfied example. I posted the code so that "future generation" can still get the idea. It's always unfortunate if you find the solution to a problem, but the link is not working anymore.

Anyway, what I'm trying to achive is some flexible table like structure. The app also has to work on the iPhone afterwards and most iPhone navigation examples work with lists. So I based my design on a list too.

Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?
Oct 15 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
It will word wrap. Just not the way you have it. Don't have time to show an example right now.
Oct 15 '08 #5

rblaettler
P: 11
An example would help :-)
Or a hint on what I'm doing wrong?
Oct 16 '08 #6

Expert 100+
P: 397
Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?
Please forgive me, but this entire thread is about as clear as mud. As may be this suggestion: use a "table like" (no width specified) definition list?
Aside: My piece of garbage (personal opinion) iPhone has no difficulty rendering what I suggested a couple of days ago, or with the above suggestion for the use of a "table like" definition list where no width is specified.
Oct 18 '08 #7

rblaettler
P: 11
Thanks for the hint about the definition list. I've created an example with that approach, which works fine in FF, but has some issues with IE. Sometimes it does it side by side and sometimes it drops all rows. Depends on the width of the window.

Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.
Oct 22 '08 #8

Expert 100+
P: 397
Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.
Nothing is impossible: depending whether or not "your company" can live with the consequences-- in this case, widths are needed, a lot of code is necessary, and hacks from here to Havana are required to get the right column to come even close to holding in the IEs. This [1] is a modification, I took the liberty to make, on a test case example somewhat similar to yours by Alex Robinson . Further modification is on you. Incidentally, Alex makes it clear on his site that he does not provide answers or solutions to problems.
[1] float drop in Internet Explorer with long text
Oct 22 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.