As far as I can see, since the box has relative positioning, setting either
left
or
right
simply moves the element relative to its default position. Setting both at the same time has no effect.
If you only need to support modern browsers
(namely: not IE10 or below), you can use Flexbox:
<div class="BottomBar">
<asp:Panel runat="server" ID="pnlSearch" GroupingText="Search" CssClass="searchBar">
<div>
<asp:TextBox runat="server" ID="txtSearch" TextMode="Search" />
<asp:Button runat="server" ID="btnSearch" Text="Zoek" CssClass="searchButton" />
</div>
</asp:Panel>
</div>
.searchBar > div {
display: flex;
}
.searchBar input[type=search] {
flex-grow: 1;
}
.searchBar .searchButton {
margin: 0 20px;
}
Demo[
^]
EDIT:
Since ASP.NET adds the CSS class to a wrapper
<div>
rather than the
<fieldset>
, you'll need to modify the CSS slightly.
.searchBar div {
display: flex;
}
Updated demo[
^]