Floating Div Issue In Ie

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

Solution 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:

<divid="div2"><divclass='heading'>Passage II</div><divclass='passageText'><divclass='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!