Achieve a multi-column layout on a webpage by ensuring two HTML elements remain on the same line

Question

Achieve a multi-column layout on a webpage by ensuring two HTML elements remain on the same line

Trying to tackle this CSS challenge, but it's definitely been a head-scratcher for me.

I'm aiming to place two elements on the same line:

Textbox
Search icon image

The search icon should maintain its size regardless of width, while the textbox should occupy 100% of the available space (while still positioning the icon right next to it).

The issue I'm facing is depicted in this visual (the alignment is off due to the textbox taking up 100% width):

This is my current 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="Search for content" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
    </div>
</div>

This is the accompanying 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 helpful clues or suggestions would be greatly appreciated. Thank you!

html css twitter-bootstrap

Answer 1

Answer №1

If you want to improve the layout, consider using display table-cell instead of inline. You'll need to create a new container div and set both searchDiv and searchDivFullSpan to have a width of 100%. Make sure that the child divs of searchDiv are also 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>

Answer 2

If you want to improve the layout, consider using display table-cell instead of inline. You'll need to create a new container div and set both searchDiv and searchDivFullSpan to have a width of 100%. Make sure that the child divs of searchDiv are also 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>

Answer 3

Answer №2

Currently I am unable to test this, but have you thought about trying something similar to the following:

 .searchDiv{
       padding-left: 25px; //Set this equal to the width of your image plus a little extra
       position:relative;
  }

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

  input[type="image"]{
      width: 20px; //Adjust this as necessary, keeping it consistent with the above value
      position:absolute; 
      top:10px;  //Make adjustments to these two properties as needed
      left:5px;

  }

Answer 4

Currently I am unable to test this, but have you thought about trying something similar to the following:

 .searchDiv{
       padding-left: 25px; //Set this equal to the width of your image plus a little extra
       position:relative;
  }

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

  input[type="image"]{
      width: 20px; //Adjust this as necessary, keeping it consistent with the above value
      position:absolute; 
      top:10px;  //Make adjustments to these two properties as needed
      left:5px;

  }

Answer 5

Answer №3

Consider this example with Bootstrap 3 for some guidance:

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

To ensure elements remain side by side, add the class "form-inline" to the container Div. Use display:block if you want them to always stay next to each other regardless of screen resolution.

Answer 6

Consider this example with Bootstrap 3 for some guidance:

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

To ensure elements remain side by side, add the class "form-inline" to the container Div. Use display:block if you want them to always stay next to each other regardless of screen resolution.

Answer 7

Answer №4

Give this a shot:

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>

Check out the jsfiddle here!

Answer 8

Give this a shot:

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>

Check out the jsfiddle here!

Answer 9

Answer №5

Interesting,

Have you considered placing the Icon above the input field using absolute positioning?
Alternatively, a potentially more effective solution could be found in this approach:

Two containers: one fixed, other expanding

two containers side by side, one full width while the other adjusts to content

If these suggestions don't work, perhaps creating a fiddle would be beneficial.

Answer 10

Interesting,

Have you considered placing the Icon above the input field using absolute positioning?
Alternatively, a potentially more effective solution could be found in this approach:

Two containers: one fixed, other expanding

two containers side by side, one full width while the other adjusts to content

If these suggestions don't work, perhaps creating a fiddle would be beneficial.

Achieve a multi-column layout on a webpage by ensuring two HTML elements remain on the same line

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to horizontally align my menu items within a Bootstrap dropdown?

Arranging Elements Individually Using Bootstrap 4 in a Row or Column

What is the best way to incorporate a percentage-based width scrollbar?

How is the color of the browser tab determined in Bootstrap?

Interactive grid feature created with HTML Canvas

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

The Hover Effect on HTML Element Not Working on One Side Specifically

Having trouble connecting my jQuery file to my HTML page

Encountering issues with submitting a request when using $.ajax GET function

Running a Node.js child process upon clicking an HTML button

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

I am experiencing an issue where my Next.js application, developed using Tauri, is not displaying the

Updating the background color and adjusting the text input color in the upcoming user interface

Show the cell data when the checkbox next to it is selected

Retrieve the current font style with Kendo UI Editor

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

Guide on implementing automatic callbacks with AJAX

determine the selection based on its numerical index

Automatically select and pre-fill a list item based on its value using jQuery

Having trouble locating and interacting with the final li item in a ul list using Selenium Webdriver in C#