ansaurus

Question

IE6 bumps down content when the parent container is too narrow

Answer 1

A:

If you put your right floating element before the left floating element in the source tree:
<div id="parent">
<div id="rightSide" />
<div id="leftSide" />
</div>
that should take care of your floating issue. I'm not certain if you can prevent them from breaking when the parent container is too narrow though, IE6 has some funky overflow logic that's for sure.

zack 2009-11-11 23:08:47

This seems only to make the red left side container render below the blue right side one, with a square of white space above the left side container.

Jack 2009-11-11 23:25:42

Answer 2

+2 A:

<html>
<head>
   <style>
            #parentcntnr{
                    width: 900px;
                    border: 3px solid black;
            }

            #leftside{
                    width: 200px;
                    float: left;
                    background-color: red;
                    position: relative;

            }

            #rightside{
                    width: 800px;
                    background-color: blue;
     position: absolute;
     float: right;
            }

    </style>
</head>
<body>
    <div id="parentcntnr">
            <div id="leftside"> content </br>content </br>content </br>content  </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
            <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
    </div>

This fixes it. YOUR WELCOME JACK!

Karl 2009-11-12 16:36:17

Doesn't work in the better browsers. Under each Firefox and the newest IE8.

BalusC 2009-11-12 16:41:16

Yup, but you can add _position: absolute; _float: right;instead, this will address only IE6.

Karl 2009-11-12 16:47:31

Sorry, but positioning it absolute makes no sense.

BalusC 2009-11-12 16:49:55

Neither does IE6, but it works.

Karl 2009-11-12 17:14:49

Answer 3

A:

Before continuing, you need to ensure that you're using the right doctype. Use <!doctype html>. You also need to replace all those wrong </br> elements by <br>.

First problem is that the #rightside is too wide. It's 800px, while there's only 700px left after filling a 900px wide container with a 200px wide content, the #leftSide. So:

#rightside{
    width: 700px;
}

should fix it.

Second problem is that you aren't floating the #rightSide anywhere. It won't float left or right from the #leftSide. We want to have it on the right side, so

#rightside{
    float: right;
}

should fix it. This also makes the margin-left completely superfluous.

Now it should look fine in the older IE browsers (just because they are buggy on floats). But in the better browsers the container div wouldn't wrap the both floated elements. That's true, you still need to clear the both floats afterwards. This is to be done by adding basically

<br style="clear: both;">

as the last element of the container div.

Now, the final result which works across all browser should look like:

<!doctype html>
<html>
    <head>
       <style>
            #parentcntnr {
                width: 900px;
                border: 3px solid black;
            }
            #leftside {
                width: 200px;
                float: left;
                background-color: red;
            }
            #rightside {
                width: 700px;
                float: right;
                background-color: blue;
            }
            . clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="parentcntnr">
            <div id="leftside"> content <br>content <br>content <br>content  <br>content <br>content <br>content <br>content <br> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <div id="rightside">content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <br class="clear">
        </div>
    </body>
</html>

Hope this helps.

BalusC 2009-11-12 16:49:19

I think you missed the point of the question. The right side has to be wider than the fixed width of the parent container. So you can't change the width to 700px. The overly wide #rightside should force a horizontal scroll bar and NOT drop down before #leftside.

Jack 2009-11-12 17:57:39

ansaurus

tags:

views:

answers:

IE6 bumps down content when the parent container is too narrow

related questions