Question

My setup is like this.

<div id="header">
<div id="heading">Title</div>
<div id="flow">
Enter Something:
    <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" />
    <input id="show" type="button" value="Add" onclick="dosomething()">
    <input id="hide" type="button" value="Search" onclick="dosomething()">
    <input id="hide1" type="button" value="Clear" onclick="dosomething()">
    <input class="floatr" type="button" value="Val" onClick="dosomething()">
    <input class="floatr" type="button" value="Val" onclick="dosomething()">
</div>


<div id="flow1">    
    <textarea readonly="readonly" cols="56" rows="1" value="" id="Search" class="allSearch"/></textarea>

    <input class="floatr" type="button" value="val" onClick="dosomething()">
    <input class="floatr" type="button" value="val" onClick="dosomething()">
</div>  

</div>

I did try this from a questions asked before but it doesn’t seem to work. In chrome and firefox it works fine without the overflow and white-space, but I need to it work in IE6 and IE8(I know they are old but let’s not go there, I don’t like working in it myself)
HTML+CSS: How to force div contents to stay in one line?

overflow: hidden;
white-space: nowrap;

I am using jquery to show and hide depending on the action of the user. Not sure if that is messing it up.

When I go to developers mode in IE two divs flow and flow1 are two rows instead of one.
Any suggestions?

Edit: CSS part

#heading
{
    text-align:center;
    font-size:20px; 
}

#header
{
    background-color:#85C2FF;
    padding-bottom:.6em;
    padding-left:.4em;
    padding-right:.4em;
    white-space: nowrap;
    overflow: hidden;
}

.floatr
{
    float:right;
}

I did try putting the whitespace and overflow within #flow div but with no result. The javascript part is LONG(VERY LONG).

@Mrchief I don’t think the js has any relevance. Without clicking anything the page doesn’t load properly. The CSS is included now.

@Phil
This is how it should look like – it does in chrome

This is how it looks like in IE. See the blue border that’s the div flow. It’s two rows. I am trying to display it in one row.
Hope that’s a bit clear now.

Edit: Figured out the problem.

The ‘floatr’ css is the problem. If I delete that everything moves the left and in one line. With float:right it moves to the right but to the next row. I am guessing that IE specific problem. Any insights?

OK. Figured it out! The problem with this is when float:right is read IE doesn’t know which line to start the float on so it moves to the next line. To solve the problem you can do this. Put the float code FIRST!

<div id="flow">
<input class="floatr" type="button" value="Val" onClick="dosomething()">
<input class="floatr" type="button" value="Val" onclick="dosomething()">
    Enter Something:
        <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" />
        <input id="show" type="button" value="Add" onclick="dosomething()">
        <input id="hide" type="button" value="Search" onclick="dosomething()">
        <input id="hide1" type="button" value="Clear" onclick="dosomething()">

</div>

Hope this helps someone. I have been banging my head over this for the last two hours. Thanks for all your help guys.

Answer 1

It’s an internet explorer issue. Put the float statements first like this.

<div id="flow">
<input class="floatr" type="button" value="Val" onClick="dosomething()">
<input class="floatr" type="button" value="Val" onclick="dosomething()">
    Enter Something:
        <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" />
        <input id="show" type="button" value="Add" onclick="dosomething()">
        <input id="hide" type="button" value="Search" onclick="dosomething()">
        <input id="hide1" type="button" value="Clear" onclick="dosomething()">

</div>