How can one make a fixed width column on the right, which works in IE 9 in normal and compatibility mode?

Question

Consider the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div style="border-style: solid; border-width: thin; width:100%">
    <input type="button" style="width:20px;float:right;" value="a" />
    <div style="padding-right:35px;">
            <input type="text" style="width: 100%;" />
    </div>
</div>
</body>
</html>

This is the correct layout, and how it looks in IE 9 in normal mode. If you stretch the browser, the button remains on the right of the input box, and the input box stretches accordingly.

IE 9 Normal

This is how it looks in IE 9 in compatibility mode. As you can see, the input box jumps onto the next line:

IE 9 Compatibility Mode

So, is there a way to fix this, so that it works regardless of whether or not compatibility mode is set?

Obviously I'm looking for a solution with minimal hackiness :)

Thanks!

Yip... swap them around and the button jumps onto the next line. — Stephen Oberauer, Aug 29 '12 at 16:33

ews2001 · Accepted Answer · 2012-08-29T17:00:54.250

Try this HTML:

<div class="search"><input name="btn" type="button" value="a" /><span><input type="text" name="search_input" /></span></div>

With this CSS:

.search > span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}
.search input[type=text] {
  width: 100%;
}
.search input[type=button] {
  float: right;
}

Here's a jsfiddle to test it out for yourself:

http://jsfiddle.net/KVhUC/

I was able to get it to work with FF, IE9 (with/without compatibility mode)

Shmiddty · Answer 2 · 2012-08-29T17:00:01.220

1

http://jsfiddle.net/Cytkx/4/

<div style="border-style: solid; border-width: thin;">
    <input type="button" style="width:20px;float:right;overflow:hidden;" value="a" />
    <div style="overflow:hidden;padding-right:10px;">
        <input type="text" style="display:block;width:100%;" />
    </div>
</div>

I believe this is close to what you're looking for. Note this may not be backwards compatible.

edited Aug 29 '12 at 17:00

answered Aug 29 '12 at 16:39

Shmiddty

13,847
1
35
52

And, obviously, it would be better to not use inline styles. – Shmiddty Aug 29 '12 at 16:40
Thanks, but not exactly what I'm looking for. The right of the input box is hidden under the button. – Stephen Oberauer Aug 29 '12 at 16:46
@LostHobbit just add some padding/margin to the input box's wrapping element. – Shmiddty Aug 29 '12 at 16:47

score -2 · Answer 3 · edited Aug 29 '12 at 16:12

-2

You can try using <Table> </Table> instead of Div. They are better containers compared with divs.

edited Aug 29 '12 at 16:12

Alex Hadley

2,125
2
28
50

answered Aug 29 '12 at 16:08

PQubeTechnologies

308
1
3

Many web developers these days don't believe in using tags unless working with tabular data. I'll wait to see if there are any other suggestions.
– Stephen Oberauer Aug 29 '12 at 16:14
1

-1 -- you can apply table-like display handling to divs with CSS, there's no reason to use the actual table tags for anything except... tables of data. – Chris Baker Aug 29 '12 at 16:23

How can one make a fixed width column on the right, which works in IE 9 in normal and compatibility mode?

3 Answers3