Question

This looks like IE8 issue. I have two divs that are side by side because I float one of them to left. However, if the content inside of right div gets too big for the window, the right div breaks line and goes under left div. How do I make both divs stay on same level, side by side?

Here is the code:

css:

    <style type="text/css">
    #left_div
    {
        float: left;
        width: 250px;
        height: 400px;
        border: solid 1px red;
    }
    #right_div
    {
        width: 3000px;
        border: solid 1px blue;
    }
</style>

html:

    <div id="left_div">
        text in left_div
    </div>
    <div id="right_div">
        text in right_div
    </div>

Answer 1

Add float: left to the right_div as well.

If it is anything similar to the examples shown by Matthew James Taylor and his Perfect 2 Column Left Menu take a look at how he is doing it and maybe copy it!

---

IE has in the past also had the issue that it took height and width to mean height-min and width-min, thus still allowing boxes to resize eventhough they had specific limits set. See Webcredible’s article, most notably number 2 on their list!