Force a div to one line in internet explorer

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.

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.

Can you post your css and js code as well? Or create a jsfiddle test page and include that link in here. — Mrchief, Jun 24 '11 at 15:02
first get rido of id="Flow" HTML rules, you can have only one element with the ID flow, that means id is unique. — Senad Meškin, Jun 24 '11 at 15:03

score 0 · Answer 1 · answered Jun 24 '11 at 15:04

0

Does surrounding your possibly wrapping HTML in <nobr>not gonna wrap</nobr> work?

answered Jun 24 '11 at 15:04

Milimetric

13,411
4
44
56

score 0 · Answer 2 · answered Jun 24 '11 at 15:15

0

The question is kinda vague but here is my guess:

Float both divs (flow and flow1) to the left: #flow, #flow1 { float:left; }

Set their display properties to inline: #flow, #flow1 { display:inline; }

You should also be making sure that the divs don't have a width too large to be inline.

answered Jun 24 '11 at 15:15

Phil

10,948
17
69
101

I set the width to 100% and tried that but it doesn't change a thing in IE – theking963 Jun 24 '11 at 15:26
The width of textarea is causing it to wrap. After setting them to float, if I maximize my browser, it appears on one line. – Mrchief Jun 24 '11 at 15:34
You need to set the min-width on the #header – Kevin Bowersox Jun 24 '11 at 15:37
1

@Mrchief are you using IE? It works fine in chrome and firefox without all the new CSS. The problem is IE. I have updated my problem. – theking963 Jun 24 '11 at 15:37
@daking963 yes, and usually IE is the problem ;) – Mrchief Jun 24 '11 at 17:40

score 0 · Answer 3 · answered Jun 24 '11 at 15:25

Try this:

<div id="header">
    <div id="heading">Title</div>
    <div id="flow" style="float: left">
        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" style="float: left">    
        <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>

You need to position the divs using "float".

That doesn't work but I figured out the problem and have updated it. The problem is with the float. — theking963, Jun 24 '11 at 15:32

score 0 · Answer 4 · answered Jun 24 '11 at 15:25

0

Its pretty dirty but here it is. You may need to adjust min-width depending on your resolution.

#header{
    min-width: 1200px;
}
#flow{
    float:left;
}
#flow1{
    float:left;

}

answered Jun 24 '11 at 15:25

Kevin Bowersox

93,289
19
159
189

@daking963 Have you gave this a try? – Kevin Bowersox Jun 24 '11 at 15:48

score 0 · Accepted Answer · answered Jul 04 '11 at 14:48

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>

Force a div to one line in internet explorer

5 Answers5