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

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

javascriptphpjqueryhtmlajax

Switching markdown data into HTML within a Django and React application

I am considering the best way to store blog content in my database so that I can easily display it on an HTML page using an AJAX call. After conducting research, I have found suggestions to store the blog post as markdown, which seems logical since it supp ...

htmldjangoreactjsdjango-rest-frameworkmarkdown

What is the best way to split a div diagonally while keeping the border unchanged?

I'm attempting to devise the design displayed in the link below: I have experimented with the following code: .App { font-family: sans-serif; text-align: center; } #container { height: 300px; width: 300px; overflow: hidden; backgrou ...

htmlcss

Adding a space after a comma automatically upon saving changes in VSCode

Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...

javascripthtmlvisual-studio-code

Adding a unique component to a Spring Boot application with Thymeleaf integration

My navigation bar includes a list with a dropdown feature. When the user clicks on the dropdown entry, I want to display a snippet of another HTML page within the project. The navigation bar HTML code is as follows: <div th:fragment="navbar"& ...

javahtmlspring-bootthymeleafbootstrap-5

What is the process for choosing an element, wrapping it in a <div>, and appending a class to it using only JavaScript?

When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary. The task at hand involves selecting an <img> within a post and wrap ...

javascripthtmlcss

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Expand the HTML Template and Resize Children to Fit the Window

My software creates HTML email templates that typically range from 600px to 650px in width, but can sometimes be as wide as 900px. The templates have nested table elements for email clients, with all dimensions specified in fixed pixels rather than relativ ...

javascripthtmlmeta-tagsviewportemail-templates

Android Font Icon Spacing Issue with IconFont (Fontastic)

After using Fontastic.me to create an iconfont, I encountered an issue specifically with the native browser of Android 4.2.2 and 4.3 (such as modern Samsung tablets). In these browsers, the characters in the entire font appear to have no width. This proble ...

androidcssicon-fonts

Guide to incorporating Ember into an existing HTML file

Planning to integrate Ember 2.0 into an existing HTML page and have a few queries regarding this. Is it necessary to build the ember project beforehand? This results in creating appname.js and vendor.js files. Which js files are essential to be included ...

javascripthtmlember.js

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Need assistance with a problem involving an input-group in bootstrap 4. Within the input-group, there are two inputs— one with a prepend and the other with an append. The setup is contained within a col-12 div in a form-group, and the goal is to set spe ...

htmlcsspositionbootstrap-4

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

javascriptjquerycsshtmljquery-ui

Skewed div with a stylish background image

Struggling with an issue here. I've managed to skew my div just right, but now I'm trying to get the image to fit without tiling. If anyone can offer some assistance, that would be greatly appreciated. This is what I'm aiming for: Currentl ...

htmlcss

No results found for the xpath within the <p> tag

I'm currently using selenium.webdriver chrome to scrape data from my website, and I need to extract the location details of visitors. Although I have successfully identified the <p> tag that contains 'location', it is returning None. ...

htmlselenium-webdriverxpathpython-3.6

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

csscss-selectors

Do not let CKEditor interact with widget content

Even though the HTML content within the aside tag is not editable, CKEditor still performs content filtering and removes tags while displaying hidden input fields. Here is the relevant HTML widget code: <aside class="widget widget-form" contenteditabl ...

javascripthtmlckeditor

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

javascriptjqueryhtmlcsstwitter-bootstrap

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

Switching from Wordpress to Django and completely revamping the website using only Django

I have a webpage that currently has wordpress.org preinstalled, but I have never utilized it. Now, as I am exploring django, I am interested in using it to build my website instead of relying on wordpress. Can someone guide me on how to transition from wo ...

htmlpython-3.xdjangowordpresshosting

Storing information when an object is indexed in a for loop, to be retrieved later when

My JavaScript code includes an AJAX call that takes user input from a form and uses it to search for a JSON object. The matching objects are then displayed in a datalist successfully. Everything is working well so far, but now I want to extract specific f ...

javascripthtmljsonajax