Nick Nick - 1 month ago 10
CSS Question

Responsive full width input with button

I have the fiddle here: https://jsfiddle.net/ufLpqdtj/

My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.

In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.

Any thoughts or suggestions?



#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}

<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>




Answer

What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.

Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.

In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/

Comments