Adjust the size of the div container while ensuring that all elements are aligned horizontally

My goal is to design a page where all elements remain perfectly aligned, even when the user resizes the window. However, the code I have written does not achieve this.

<div style="display:flex; justify-content: left; padding: 3px;">
<div style="margin:2px;">Language: <select name="lang"><option></option></select> | Pair language: </div>
<div style="margin:2px;"><select id="pairlang[]" name="pairlang[]" multiple size=3><option></option></select></div>
<div style="margin:2px;">Items: <input type="text" name="item" size="10">  | </div>
<div style="margin:2px;">Search: <input type="text" name="string"></div>
</div>

In the future, I may want to add new elements within the div container. Is there a method to maintain perfect alignment of all elements regardless of window width changes?

htmlcss

Answer №1

It is recommended to avoid inline styling and instead use CSS classes for better code management. Additionally, using <label> tags to define the text/labels of <input> or <select> elements is considered best practice.

To enforce horizontal alignment on child elements, you can apply white-space:nowrap; to the parent <div> and use display:inline-block; for the child <div> elements. If a horizontal scroll bar is needed for the parent <div>, simply add overflow-x:scroll; to the .parent class.

.parent {
  margin: 0;
  text-align: left;
  white-space: nowrap;
  // overflow-x: scroll;
  justify-content: left;
  padding: 3px;
}

.child {
  display: inline-block;
  margin:2px;
}
<div class="parent">
  <div class="child">
    <label>Language:</label>
    <select name="lang">
      <option>English</option>
      <option>Hindi</option>
      <option>Persian</option>
    </select>
  </div>
  <div class="child">
    <label>Pair language: </label>
    <select id="pairlang[]" name="pairlang[]" multiple size=3>
      <option>German</option>
      <option>Spanish</option>
      <option>French</option>
      <option>English</option>
      <option>Hindi</option>
    </select>
  </div>
  <div class="child">
    <label>Items:</label>
    <input type="text" name="item" size="10" placeholder="3" />
  </div>
  <div class="child">
    <label>Search:</label>
    <input type="text" name="string" placeholder="Enter search text here..." />
  </div>
</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

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Can someone please guide me on how to implement a check all and uncheck all functionality when I check individual checkboxes one by one? Once all checkboxes are checked, the 'checkall' checkbox should automatically be checked. Below is the code s ...

javascriptjqueryhtml

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Seeking assistance with implementing Styles using the .css() function in Jquery. Any guidance is appreciated

This particular style is exactly what I am looking for. body{ background: url("img/Background_Home.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

jquerycssbackground

Troubleshooting: Vue.js Component template not displaying items with v-for loop

I recently implemented a method that calls an AJAX request to my API and the response that it returns is being assigned to an array. In the template section, I am using the v-for directive to display the data. Surprisingly, it only renders once after I mak ...

javascripthtmlvue.jsvuejs2vue-component

Troubleshooting: Issues with jQuery Dropdown Menu

I'm currently working on a website that includes a settings feature with a button. My goal is to have the options and other links display in a dropdown menu when hovered over. Although I have written what I believe to be the correct code, it's no ...

javascriptjqueryhtmlcssdrop-down-menu

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

Scrollbar not displaying on IE when set to overflow: auto

Greetings, all! I am facing yet another design challenge with Internet Explorer. I have a DIV with Overflow:auto on my website that works perfectly fine on Chrome. However, when it comes to IE, the scroll bar doesn't show up and all the images inside ...

htmlcssinternet-explorer

Guide to creating a custom wrapper for a Material UI component with React JS

I am utilizing the Material UI next library for my project and currently working with the List component. Due to the beta version of the library, some parameter names are subject to change. To prevent any future issues, I have decided to create a wrapper a ...

javascriptcssreactjsmaterial-ui

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

htmlcss

The issue of CSS not being connected properly on Github

I have successfully connected my CSS folder, which includes the styles.css file, to my index.html using the following code: <link rel="stylesheet" href="css/styles.css"> Even though it works fine when I test it locally, the CSS d ...

cssgithub

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

htmlcsswebmargin

Search for text within the nearest <p> tag using HTML and jQuery

My table contains different td elements with the same ID, as shown in this foreach loop: <td class="AMLLeft" style="display:inline-block; !important">ID: <p class="important">${item.id}</p> </td> <td align="right" nowrap="tr ...

javascriptjqueryhtml

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object. export const colors = [ { colorVariable: "$ui-background" }, { colorVariable: "$ui-01" }, { colorVariable: "$ui-02" }, ... ] The Object above is derived from a scss file whic ...

javascriptcssreactjsscss-mixinsreact-16

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project I have a grid structure that is somewhat complex: body { margin: 0; height: 100vh; text-align: center; } .grid-container { ...

javascripthtmlcsscss-gridanime.js

"Encountering an issue where attempting to set a property on an undefined variable, despite it being

I've been working on a timer app/component, but I'm running into an issue. The error message reads: Cannot set property startAt of undefined. I've defined it in my dashboard component, so I'm not sure where the problem lies. Any suggest ...

htmlangulartypescripttimer

The functionality of the Regions plugin in wavesurfer.js appears to be completely nonfunctional

I've been attempting to utilize the Regions plugin from wavesurfer.js, but unfortunately, it's not functioning as expected. Despite trying various methods suggested on different websites, I have yet to achieve success. Below is the snippet of c ...

javascripthtmlpluginswaveformwavesurfer.js

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

npm version 7.5.4 has been detected, but the Angular CLI currently requires npm version 6 to function properly due to ongoing issues. To proceed, please install a compatible version by running this command: npm install --global npm@6. For more information ...

javascripthtmlnode.jsangularnpm

Scraping data from a website using Python by targeting the `<td

Just starting out with Python and Web Scraping... I'm trying to extract the numbers 1.16, 7.50, and 14.67 from the highlighted portion of code using td, class, table-matches__odds pageSoup.find_all, but so far haven't had any luck. Anyone have an ...

pythonhtmlwebbeautifulsoupscreen-scraping