Making two elements stays next to each other if you have 100% width
I'm trying to make the field text
expand to its full width, but still allowing space for the submit button next to it, however, I can't seem to get it to work.
CodePen: http://codepen.io/anon/pen/eNdvWY
HTML:
<div class="wrapper">
<input type="text" name="foo" class="tb">
<input type="submit" name="submit" value="Go">
</div>
<div class="wrapper small">
<input type="text" name="foo" class="tb">
<input type="submit" name="submit" value="Go">
</div>
CSS
.wrapper {
width: 510px;
}
.wrapper.small {
width: 255px;
}
input.tb {
width: 100%;
max-width: 456px;
}
You will see how the first one works because of the set max-width
, but the smaller one will place the button on the next line.
I tried this using floats
with the same results. The only way to do it with tables
?
Also, white-space: nowrap;
doesn't work as it overflows the parent; which I don't want.
source to share
You can add:
white-space:nowrap;
into the container of your items
Or better if you don't want the button outside of the parent width to be wrapped text input
in a range with properties like this:
span {
display: block;
overflow: hidden;
}
and make your button float to the right (and change the html order)
Like in this codepen
(You can add padding-right
to span to make space between both elements)
The third possible option would be to float both elements to the left (without changing the html order), and if the width of the bootmet is known and fixed. You can set the width of your input as:
width:calc (100% - XXpx);
as in this Codepen (I added so paddings and margins won't be messy before property ) box-sizing: border-box;
calc
source to share
An alternative solution is to wrap the elements inside div
and set disaply: table
as:
.table {
display: table;
}
.wrapper {
width: 510px;
padding: 5px;
background-color: teal;
display: table-cell;
}
.wrapper.small {
margin-top: 15px;
width: 255px;
}
input.tb {
width: 100%;
max-width: 456px;
}
<div class="table">
<div class="wrapper">
<input type="text" name="foo" class="tb">
<input type="submit" name="submit" value="Go">
</div>
<div class="wrapper small">
<input type="text" name="foo" class="tb">
<input type="submit" name="submit" value="Go">
</div>
</div>
source to share