Make two html elements stay on same line using Bootstrap responsive design

Question

Probably easy CSS, but I've looked at this for WAY to long now.

I want to have two elements on same line:

Textbox
Search icon image

The search icon should stay same size no matter width, the textbox should align 100% of the space (but still make sure the icon is right next to it.

My problem can be seen in this image (they will not align because of the 100% width of textbox):

enter image description here

My markup:

<div class="SearchBox">
                        <div class="searchDiv">
                            <div class="searchDivFullSpan">
                                <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
                            </div>
                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
                        </div>
                </div>

My css:

.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Any hints? Would really appreciate it :-)

score 2 · Accepted Answer · edited Aug 08 '18 at 07:50

You should try display table-cell rather than inline. You will need another container div. Then give both searchDiv and searchDivFullSpan width of 100%. Both child divs of searchDiv need to be set to display table-cell.

.SearchInputBox {
  border: 1px solid #C6D1AD;
  font-size: 20pt;
  background-color: #FAFAFA;
}

.searchDiv {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.searchDiv div {
  display: table-cell;
}

.searchDivFullSpan {
  width: 100%;
}

.searchDivFullSpan input[type=text] {
  width: 100%;
}

.searchDiv input[type="text"] {
  background-color: #f3f3e9;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

<div class="SearchBox">
  <div class="searchDiv">
    <div class="searchDivFullSpan">
      <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
    </div>
    <div class="searchImageDiv">
      <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
    </div>

  </div>

</div>

<div class="SearchBox">
     <div class="searchDiv">
        <div class="searchDivFullSpan">
             <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
         </div>
         <div class="searchImageDiv">
             <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
          </div>

      </div>

</div>



<style>

    .SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDiv div {
  display:table-cell;
}

    .searchDivFullSpan {
    width:100%;
    }

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style>

Many great answers, but your solution helped the most. Thanks a lot! — Lars Holdgaard, Aug 28 '13 at 17:54

score 1 · Answer 2 · answered Aug 28 '13 at 17:39

I can't test this at the moment, but what about something like:

 .searchDiv{
       padding-left: 25px; //MAKE THIS THE WIDTH OF YOUR IMAGE PLUS A BIT EXTRA
       position:relative;
  }

  .searchDivFullSpan input[type=text] {
        width: 100%;
  }

  input[type="image"]{
      width: 20px; //ADJUST THIS, BUT ADJUST ABOVE IN TANDEM
      position:absolute; 
      top:10px;  //FIDDLE WITH THESE TWO PROPERTIES AS NEEDED
      left:5px;

  }

score 1 · Answer 3 · edited May 22 '15 at 07:24

Try this:

CSS CODE:

.SearchBtn{
    display:inline-block;
    float:right;
    bottom:24px;
    position:relative;
}
.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

HTML CODE:

<div class="SearchBox">
   <div class="searchDiv">
      <div class="searchDivFullSpan">
         <input type="text" id="SearchOnGoogleBox"/>
      </div>
      <input type="button" value="Click" class="SearchBtn"/>
   </div>
</div>

jsfiddle

score 1 · Answer 4 · answered May 09 '15 at 16:49

I don't know if it helps but look at this example, I'm using bootstrap 3:

<div class="form-inline" style="display: block;">
  <input type="text" id="text-field-1" class="form-control" size="4" max="4" min="4">
  <input type="text" id="text-field-2" class="form-control" size="3" max="3">
  <button class="btn btn-info form-control" type="button" id="search">
      <i class="fa fa-search"></i>
  </button>
</div>

By adding class="form-inline" to the container Div you're forcing everything to stay in the same line, but you have to add display:block if you want to force the elements to always stay side by side no matter how small is you display resolution.

I prefer this anwser as other answers are triying to reinvent something already existing in Bootstrap — Mehdi, Apr 01 '16 at 01:04

score 0 · Answer 5 · edited May 23 '17 at 11:53

0

Hmm,

what about placing the Icon over the input field with position absolute?
Or maybe a better solution is something like this:

Two divs: one fixed, other stretched

two divs side by side, one 100% width others width depended on content

If this not will help make a fiddle.

edited May 23 '17 at 11:53

Community

1
1

answered Aug 28 '13 at 17:28

chris

4,827
6
35
53

Make two html elements stay on same line using Bootstrap responsive design

5 Answers5