Float Left with auto width, jumps to next line if short

[dlite922]

I'm back again,

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:

 
.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> 
 

Rant:
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:

[TheServant]

I have recently run into this problem as well. How I have fixed it is using negative margins. In my problem I had everything in one div and so made a margin-left same size as the width of my img (so that text is moved over) and then made a negative margin for img's. This is all that it is in my css:

div.links { margin-left: 320px; }
div.links img { margin: 0 0 -70px -320px; }

And my html is:

<div class="links">
            <a href=# class="link"><img src="http://bytes.com/topic/html-css/answers/.../a_logo.png" alt="a_Logo" /></a>
            <p>My text description.</p>
        </div>

However all my images are roughly the same size, so my -320px is enough for all of them to look uniform and good. This works in IE7, FF, Chrome and Opera, but I haven't tried any IE <7.

</my two cents>

[David Laakso]

I'm back again

That's nice. I guess.

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;)

Putting the page on a public server and providing a clickable link to it in your post to the forum could be a nice touch. Or, could it?

[dlite922]

I'll try the negative margin if all else fails.

I can't believe that there isn't a valid, non-hack way to do this. My code passes XHTML Transitional W3C Validation. I don't mind changing the structure to other things besides <div> and in that order. I just need the outer element to float left with fixed width.


@David Laakso
This is an intranet application, sorry. Proprietary information.

I think I provided much more than the common OP'er. I've got clear cut sections, code, AND a screenshot.

The rest I can't give you by law, otherwise I would.





Dan

[David Laakso]

Major Tom,
Is this what we're trying to do [1]?
This is Ground Control, Houston
[1] http://www.chelseacreekstudio.com/ca/cssd/aaaa.html
Cursory checked in compliant browsers and IE 6/7

[drhowarddrfine]

Parent elements are never to expand to contain floated elements. (If I'm following what the problem is. Didn't check.) This is a bug in IE. Firefox is performing correctly. To get modern browsers to imitate IEs bug, add 'overflow:auto' to the parent element.

EDIT: I'm freaking out about something right now so I'm not thinking very well right now. Apologies if I just blurt out nonsense. I'm tinkering while freaking waiting for something to happen.

You have overflow:hidden, which will work but the overflow is obviously hidden.

[drhowarddrfine]

The problem is, in your css, you are trying to style <img> with .IMG but there is no such class assigned to <img>. Change .IMG to img, without the dot.

[dlite922]

@David Laakso
You've duplicated my problem. To see it in your code, change .c width to auto and you'll see firefox drop it below the image.

As I mentioned in OP, I can set the width to a fixed value, but this also wraps the text if the container is larger than 200px. e.g. 400px, 600px, 1800px.

Maybe what i'm trying to do cannot be done in any "non-negative" way.


@drhowarddrfine
Sorry, Doc, I should have mentioned these aren't the real values (or actual html code). It just converys the point. I throught you might give me more credit than that! ;)


My image class is actually called "eventImage", the text is called "eventName", and the container is called "event".

[dlite922]

By the way, A solution that doesn't work for me but could be possible for someone else is doing this with position absolute on the childs and position: relative on the container.

The reason I don't want to do this is because my images are two types of width. If the text is a fixed length to the right, there will be a "wasted" space if the image is actually narrower than those shown in the screen shot. (e.g. movie images are rectangular)

On second thought, I think i'll implement this because I just realized no movie will have a 200px width (~ half-hour) DUH!! , they're atleast 1.5 hours (3x200px = 600px).

I really appreciate the responses and discussions I trigger here. That's why I love bytes. (The sense of humor is the icing on the cake)

See you guys later,






Dan

EDIT: I forgot to mention that position absolute also has a problem of not wrapping, but for me it will atleast display the first part of the text.

Here's the modified sample code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1st January 2002), see www.w3.org" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>:: aaaa ::</title>
 
 
    <style type="text/css">
        .a {
            position: relative;
            float: left;
            width: 200px;
            min-height: 73px; /*hard code the height if you want it to shoot out the bottom of the block with font-scaling*/
            overflow: hidden;
            border: 1px solid fuchsia;
        } 
        .b {
            position: absolute; 
            width:70px;
        }
        .c {
            position: absolute; 
            left: 67px;
            width: 500px;
        } 
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <img src="major-tom.gif" alt="" width="50" height="50"/>
        </div>
        <div class="c">
            <p>Some unreadable text goes here...</p>
        </div>
    </div>     
    <div class="a">
        <div class="b">
            <img src="major-tom.gif" alt="" width="50" height="50"/>
        </div>
        <div class="c">
            <p>Some unreadable text goes here...</p>
        </div>
    </div>     
    <div class="a">
        <div class="b">
            <img src="major-tom.gif" alt="" width="50" height="50"/>
        </div>
        <div class="c">
            <p>Some unreadable text goes here...</p>
        </div>
    </div>      
</body>
</html>
 
 

[David Laakso]

I think you'll need scripting to meet your goal.
Use a negative margin layout (such as this one) concept keeping a fixed width for the left col (to hold the image). Set min-width/max-width on parent block and control the max-width using scripting? This should avoid the float drop when the overall width changes...
http://blog.html.it/layoutgala/LayoutGala31.html

[drhowarddrfine]

@dlite922
I changed some of that. Here's what I used before:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style type="text/css">
.outerDIV {    
    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;
 
}
</style> 
</head>
<body>
 
<div class="outerDIV">
    <img src="6.gif">
    <div class="innerDIV">Test Text</div>
 
</div> 
</body>
</html>
 

[David Laakso]

Major Tom,
Curious. Only. Do you have an (x)html/css question?

We are, but only...
Ground Control, Houston.

PS
Take your protein pill.
Put your helmet on.
We track you and we hold you on our screens. Lift-off momentarily. Farewell...
Huston

[Plater]

So there is no good way to mimic the behavior of a 2 column table?
If tables are not to be used for layout, then how can you get objects to sit side-by-side without one of them being forced onto a newline?

[David Laakso]

Not sure if you asking with regard to the question of this thread or opening a new thread?
Here are 40 ways to get objects sitting next to each other using CSS without float drop cross-over:
http://blog.html.it/layoutgala/
Or one could use the CSS table model. These are not tables – they're just styled to look like tables:
http://www.w3.org/TR/CSS21/tables.html

[Plater]

Well it was meant for this question, as the issue at hand of keeping text to one side of the image would be indicative of a two column format.
I have yet to try that negative margin example, but see no reason why that functionality is so difficult to regcreate

[David Laakso]

That functionality is not difficult to create. And it was created within the thread.