ansaurus

Question

Answer 1

A:

The reason for this behavior is that .wrapper .text doesn't have a width set, and it also doesn't float. As a result, it will assume 100% width, as DIVs do by default, and when it uses 100% of its container's width, it cannot fit next to the blue box, but will show up immediately below it. To fix this, you need to set a width that is everything-16px, or you need to set float: left to the .text DIV.

The latter solution is more convenient as it doesn't require setting fixed widths, but it does require you to add a clearing DIV as the last child of .wrapper, or the content would not allocate any space in their container at all:

<div class="wrapper">
    <div class="floatedDiv"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>

    <div style="clear: both;"></div>
</div>

David Hedlund 2010-01-18 13:21:08

I'm afraid neither of these solve the problem in IE6. Just sticks to the bottom of the blue box like glue...

Paul 2010-01-18 13:23:50

Answer 2

A:

your <div class="text"> needs a width setting on it.

Jonny Haynes 2010-01-18 13:23:14

I'm afraid this doesn't work in IE6 either. See David's answer.

Paul 2010-01-18 13:25:32

It's down to the `no-wrap`. IE6 is actually doing what it's told and not wrapping the content. You can't have it both ways.

Jonny Haynes 2010-01-18 14:15:54

Answer 3

A:

An attempt at a solution (but it won't validate and isn't pretty):

For IE6:

.cantWrapper { white-space: nowrap; } .cantWrapper .floatedDiv { display: inline; zoom: 1; background-color: Blue; height: 16px; width: 16px;} .cantWrapper .text { display: inline; }

For non IE:

.cantWrapper { white-space: nowrap; } .cantWrapper .floatedDiv { display: inline-block; background-color: Blue; height: 16px; width: 16px;} .cantWrapper .text { display: inline; }

TN 2010-01-18 14:24:40

thank you. I think I tried this too, it didn't like it thought. The zoom seems to make it like a display block and it just falls down again

Paul 2010-01-18 15:38:12

Answer 4

A:

Ah ha, we have found the answer: Thank you to everyone else who helped, and to Rosie for this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        .cantWrapper { position: relative; width: 100%; clear: left; white-space: nowrap; }
        .cantWrapper .floatedDiv { float: left; display: inline; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { position: absolute; top: 0; }
    </style>
</head>
<body>
    <div class="cantWrapper">
        <div class="floatedDiv"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
    </div>
</body>
</html>

Paul 2010-01-18 15:36:52

ansaurus

tags:

views:

answers:

IE6 nowrap and floating problem

related questions