Intro:
I've got a floating div (outerDIV) with fixed width that contains an image (IMG) and a div that contains a short text (innerDIV)
Problem:
In FF, the innerDIV is displaying under the IMG because outerDIV is not wide enough to contain both of them (in some instances). In the instances where the outerDIV is wide, I don't have this problem.
IE wraps the text but still keeps it to the right of the IMG. FF doesn't wraps it and puts it on the line below the image. This doesn't work for me because the outerDIV is a fixed height and you can't see the text. (overflow: hidden). Its too short and too ugly to add a vertical scroll (overflow: auto).
Question:
How do I make the innerDIV float to the right of the image and wrap within itself instead of jump under the image? (They're all float:left;)
My Code at this time:
Expand|Select|Wrap|Line Numbers
- .outterDIV {
- position: relative;
- float: left;
- width: 200px;
- height: 73px;
- overflow: hidden;
- border: 1px solid white;
- }
- .IMG {
- position: relative;
- float: left;
- margin-left: 5px;
- margin-top: 5px;
- height: 50px;
- border-bottom: 2px solid #111;
- border-right: 2px solid #000;
- border-top: 2px solid #888;
- border-left: 2px solid #aaa;
- }
- .innerDIV {
- display: inline;
- position: relative;
- float: left;
- width: auto;
- margin-left: 5px;
- margin-top: 5px;
- font-weight: bold;
- font-size: 13px;
- }
- // Layout is so:
- <outerDIV>
- <IMG />
- <innerDIV>Test Text</innerDIV>
- </outerDIV>
I've tried combinates of values for display, position, width. but at no avail.
if width is fixed and smaller than the space left, FF will wrap it. But this isn't always the case and I don't want to shorten those that DO have the room to grow.
EDIT: sorry, the title should say jups to next line if too long. As you can see from the screen shot, the Jamie Fox Show text went under the image. In IE the text remains on the right of the image and wraps within inner div. While "Gossip Girl" has 200 px to expand without needing to wrap: