What is the best way to ensure that two elements remain side by side?

Here is the HTML code I'm working with:

.parent{
  border: 1px solid;
  width: 70%;
}

.title{
  width: 50px;
}

.input {
}
<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

I am facing an issue where I need to adjust the width of the .input element to be width: 100%;. However, doing so results in both the .title and .input elements not being on the same line anymore. How can I make sure they remain on the same line while filling the entire width of their parent container (.parent)?

Note: I have explored some solutions using either flex or calc(), but most of my website's users are using older browsers. Therefore, I am looking for a solution that supports older browsers as well.

htmlcsscross-browser

Answer №1

If you are unable to use flex, try using table-cell display instead:

.container {
  display: table;
  width: 100%;
}

.title {
  display: table-cell;
}

.input {
  display: table-cell;
  width: 100%;
}
<div class="container">
  <span class="title">Title:</span>
  <input class="input" name="title" type="text">
</div>

Answer №2

Using Flexbox is highly recommended, however, if that's not an option there are other alternatives available. One workaround is to adjust the width of the .title element to a percentage instead of a fixed 50px, which can be achieved by utilizing the float property.

.parent {
  border: 1px solid;
  width: 70%;
}

/* Adding micro clearfix to prevent parent collapse */
.parent:after {
  content: ' ';
  clear: both;
  display: inline-block;
}

.title {
  float: left;
  width: 15%;
}

.input {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  float: left;
  width: 85%;
}
<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

Answer №3

.container{
  border: 1px solid;
  width: 70%;
  display:table;
  padding: 0 10px;
}

.heading,
.field{
  display: table-cell;
}

.field {
  width:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
}
<div class="container">
  <span class="heading">heading: </span>
  <input class="field" name="heading" type="text">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

PHP URL Encoding - variable in a hyperlink

Within my .php page, I have a link that directs to Information.php. <li><a href="http://localhost/Information.php?AI=<?php echo $_GET['AssignedI'] ?>">Stats</a></li> The 'GET' method retrieves the variabl ...

phphtmlurlhyperlink

Updating the source of an iframe when the linked file is modified or updated

Currently, I am in the process of developing a page named live_link_frame.php. This page includes loading an iframe through a URL retrieved from a local file called live_link.txt: <?php $filePath = 'live_link.txt'; $handle = @fopen($filePath, ...

javaphphtmljquerydom

Is it possible to conceal columns in an HTML table when the rows beneath them are devoid of content?

In my HTML page, I have a table with columns that are populated dynamically from a database using Razor for output. ID Name Week_1 Week_2 ... Week_52 1 Test1 3 1 2 Test2 2 3 3 3 Test3 5 1 Is there a way to hide the Week_52 column if it has ...

javascripthtmlsqlasp.net-corerazor

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Apologies for any inaccuracies in my English writing. In the Asp.Net Core project view, I am trying to use JavaScript to capture multiple Span tags within innerHTML represented by a loop and display their sum in another tag. However, I am only able to ret ...

javascripthtmlarraysasp.net-mvcasp.net-core

Does the icon vanish once you alter the button's color?

Warning: Adult content Check out this website: link When you visit this page, you'll notice that the Add to Cart button is orange. The button also has an icon of a shopping cart. This icon only appears if you remove the following code. To make th ...

htmlcss

Obtain the value of the nth child in jQuery without referencing the HTML tag

I need to work with the number 1.99 in my calculations, but it is preceded by a dollar sign which is subject to change. $(function() { const x = $('#test').text(); console.log(x); console.log(Number(x) + Number(x)); }); <script src="https://cd ...

javascripthtmljquerywordpresswoocommerce

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

javascriptcssformsvalidation

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Looking at the screenshot, you can see variable names such as "email_address", "email_message" and "email_subject". I would like these to be displayed as "Email", "Message" and "Subject" instead. The validation in this form is done using MM_validateForm() ...

phpjavascripthtmlwebforms

Using CSS to present text following the header's upload

In my form, I have three fields: name, designation, and description. Currently, all three are displayed at once. However, I want to first display name and designation, then later show the description after some time. <div class="teamspage4"> & ...

css

Set the height of the div element to be the same as its parent element (100

Within my main div, there are two child divs. I want the first child div to have the same height as the parent div, without specifying a height in CSS. For reference, take a look at this example: http://jsfiddle.net/x8dhnh4L/ The pink div should expand to ...

htmlcssheight

How can I use JavaScript to alter the background color of a dropdown option when selecting a different option?

Below is the code snippet for a dropdown menu: <select name="sourcesSelect" id="{{this.commonID}}" class="custom-select sources" data-color="" placeholder="{{this.status}}"> <option value=&q ...

javascripthtmljquerycssexpress

Randomize elements with the click of a button

Every time the page refreshes, the words shuffle around. For instance, "May I# know# your name?" shuffles to "know May I your name". To display the correct sentence with "#" as "May I know your name?", click the SHUFFLE button to trigger the shuffling. HT ...

javascriptphphtmlshuffle

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description: I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click. Problem Details: ...

javascripthtmlcssgame-development

Bootstrap 4 collapsible menu "drop-down" feature exclusively for mobile users

On my website, I have a simple navigation bar located at the top with just two links. However, when the view switches to mobile (tablet and/or smartphone), these links disappear and are replaced by a "hamburger" menu icon. The issue arises when I click on ...

htmlcssbootstrap-4

Creating dynamic links between two cells of two HTML tables within an HTML email using JavaScript

A recent project requires the creation of HTML-based emails with tables for each automation script within the test automation framework. Additionally, there is a request for an extra HTML table to provide a quick overview. The cells in the first column of ...

javahtmljakarta-mailhtml-table

Problem encountered when incorporating PHP code into HTML

I have a PHP forum and an HTML website that I am trying to merge for a cohesive appearance. However, I have encountered an issue when attempting to integrate the PHP code into the HTML file. Despite using the following code: <?php echo "here goes my P ...

phphtmlvs-web-site-project

"Hiding elements with display: none still occupies space on the

For some reason, my Pagination nav is set to display:none but causing an empty space where it shouldn't be. Even after trying overflow:hidden, visibility:none, height:0, the issue persists. I suspect it might have something to do with relative and ab ...

javascripthtmlcssmasonry

Integrating CSS into dynamically generated table rows using jQuery

Having trouble applying CSS to table rows created via ajax request. Despite using jQuery to add CSS to newly generated rows, it only affects the existing table headers. The table already has a 'sortable' class which also doesn't apply to dy ...

jquerycssajax

Displaying a variety of inline images with text floating beside each one

I have multiple images placed in divs adjacent to each other as shown below: <div id='images'> <div class="iphoneimage"> <img src="img1.jpg" height="300"> <h5 class="size">1363 x 2048</h5> &l ...

htmlcss