Have Geek Brain

IE8 problem: div breaks line even though it floats

It looks like an IE8 issue. I have two divs that are side by side because I am floating one of them to the left. However, if the content inside the right div gets too big for the window, the right div breaks the line and goes below the left div. How do I make both divs stay flush, 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>
+1


a source to share


3 answers


Add float: left and right_div.

If this is something similar to the examples shown by Matthew James Taylor and his Perfect 2 Column Left Menu Check out how he does it and maybe copy it!



In the past, IE also had the problem that the height and width took up the height-min and the width-min, thus allowing the boxes to be resized, although they had certain limitations. See the Webcredible article , first of all number 2 on their list!

+4


a source


You can also add a left margin of at least 250px (left_div width) to the right_div, this way there will always be room for the left_div next to the right_div.



0


a source


change doctype: (IE8 needs to render the webpage correctly)

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns = "http: / / ww w.w3.org/1999/xhtml "XML: Lang =" en-GB ">

(I edited urls with spaces, so don't forget to remove them :))

0


a source






More articles:


All Articles