Question

Further to https://stackoverflow.com/questions/8990246/frame-like-in-html/8990407#8990407 I implemented floating divs in my JSP. It works properly in firefox but not in IE

This is how I placed the div

<div id="div2">
    <font class='passageNumber'>Passage II</font>
    <font class='passageText'>
        <center>
            <font class='title'>What does Millie
                hope for?
            </font>
        </center>
<br />

TEST PASSAGE
</font>
</div>

The CSS i used is

#div2, #div3 {
    overflow: auto;
    float: left;
    height: 450px;
}




#div2{
    display:inline-block;
    width: 50%;
}

#div3 {
    display:inline-block;
    width: 50%;

}

U can see the allignment in the attached image

Whereas the same works fine in firefox.

but in IE the “passage II” text comes down and if the passage is big, double scroll bar is appearning. Please help

Answer 1

Not to do the work for you, but I’d suggest using HTML which has a better connection with current standards and trends to provide a more solid and stable solution.

I’d first construct the div which would contain everything that you’d float, then add the elements into that, using appropriate mark-up for those elements:

<div id="div2">
    <div class='heading'>Passage II</div>
    <div class='passageText'>

        <div class='title'>What does Millie hope for?</div>
        <p>TEST PASSAGE</p>

    </div>
</div>

…and for your CSS I might try:

.div2
{
    float: left;
    width: 400px;
    height: 300px;
}

.heading
{
    font-size: larger;
    font-weight: bold;
}

.passageText
{
    font-family: Arial, sans-serif;
}

.title
{
    text-align: center;
}

Just keep it neat, relevant and well constructed, and you should dodge these annoyances quite successfully – most of the time! Hope this helps…

EDIT:

If you have no control over the HTML, and that’s the way it’s just formatted, I might also try adding the display: block; attribute / value to the style sheet to make it behave more like a div element. In general, with the code you provided, block-level displaying of those elements wouldn’t ruin the structure at all:

font
{
    display: block;
}

I would try and see if I could maybe neaten up that HTML though!