CSS, two columns - left with dynamic width (input), right with fixed width (button)
Can anyone point me to this solution?
Html
<div class="container">
<input type="text" class="left" />
<button class="right">Some button</button>
</div>
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right { width: 100px; }
Here is a sample pen code: http://codepen.io/be-codified/pen/qdRRBY
The input field must be stretchable, the button must be fixed to the right.
Thanks in advance.
// edit
I cannot use a table tag because the layout needs to be responsive.
source to share
I gave input
width calc(100% - 110px)
and button a float:right
which resulted in the following . This is what you need? The type of input you want to use is not user-stretched as far as I know.
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
float: right;
}
input.left {
width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}
source to share
I suggest you put the form elements in <div>
, so don't change their default display properties and then set the left input field to 100% if necessary.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
In fact, both left and right can have dynamic width, so the right column always gets the minimum width based on the button's length.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
white-space: nowrap;
}
.left {
width: 100%;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
source to share
Here is a fully functional solution.
Html
<div class="container">
<div class="input-flied-box">
<form>
<input type="text" required="required" placeholder="Right Some thing" />
<button type="submit" class="submit-button">Send</button>
</form>
</div>
</div>
CSS
/* RESPONSIVE CSS */
.container{
width: 100%;
}
.input-flied-box{
width: 100%;
}
.input-flied-box input{
padding: 6px 12px 6px 12px;
}
.submit-button{
top: inherit;
right: inherit;
position: relative;
margin-bottom: 15px;
}
@media (min-width: 768px){
.container{
width: 750px;
}
.input-flied-box{
width: 600px;
}
.input-flied-box input{
padding: 6px 101px 6px 12px;
}
.submit-button{
top: 14px;
right: 14px;
position: absolute;
margin-bottom: 0;
}
}
@media (min-width: 992px){
.container{
width: 960px;
}
}
@media (min-width: 1200px){
.container{
width: 1170px;
}
}
/* RESPONSIVE CSS END */
*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}
.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}
source to share