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

StackOverflow https://stackoverflow.com/questions/12182025

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!

Was it helpful?

Solution

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)

OTHER TIPS

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top