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

css, html, twitter-bootstrap

Solution

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>

Problem

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): 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 :-)

Original source

Related problems