Home/ Questions/Q 8507039
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:45:26+00:00

Consider the following HTML: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style=border-style: solid;

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0