Is it possible to have multiple divs online that automatically move to the next line when the screen size changes?

How can I ensure that each pair of dropdown and label elements stays on the same line, and moves to the next line based on screen size?

Here is my current approach:

<div style="display:inline-block; vertical-align:middle; width:100%;">
    <div style="float:left; width:40%; display:block;">
        <label for="zone"><b><%=zonestr%></b></label> 
        <select id="zone" name="zone" onchange="getDIV();start();">
            <option value=""><%=selectstr%><%=zonestr%></option>
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
        </select>
    </div>
    <div style="float:left; width:60%;">
        <label for="district"> <b><%=resultstr%></b> </label>
        <select id="district" name="district">
            <option value=""><%=selectstr%><%=resultstr%></option>
            <option value=""></option>
        </select>
    </div>
</div>

Answer №1

Utilize the Bootstrap grid by referencing the codepen example at: codepen.io/greatzspido/pen/YrvQry

If you prefer a lighter grid structure without the full Bootstrap framework, check out the ultimate lightweight grid system at .

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

What is the most effective method for embedding a Kotlin program into a website?

I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...

Tips for displaying the CSS3 background image on your website

My website is not displaying the background-image with the URL img/hero.jpg. I attempted using ../img/hero.jpg but still no success. Are there any solutions to this issue? I also experimented with a PDF image, but it did not work either. ...

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

obtain data in JSON format from a Node.js server and display it on an HTML

I am currently working on a feature that involves sending an AJAX request to the server and receiving the output of a MySQL query on the page http://localhost:3000/result.html upon clicking a button. <body> <form action="/setLocation" method=" ...

The vertical baseline alignment is not functioning as expected

In my setup, I have a straightforward configuration: <button> Lorem </button> <input type="text" value="Ipsum"> both positioned side by side with the help of display: inline-block: button, input{ height: 34px; line-height: ...

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

Troubleshooting: Issues with locating CSS and JS files (404 error) while utilizing URL parameters within Django platform

I've designed a dashboard page that showcases various graphs. The page automatically updates the graph data every hour. You can access the page at the following URL: http://localhost/dashboard I'd like to give users the option to specify the ...

Having difficulty displaying closed captions on HTML5 videos

I'm currently attempting to enable closed captions for an HTML video. Here is the code I am using: <video width="320" height="240" id="video" controls> <source type="video/mp4" src="file.mp4" > <track id="video1" src="file1.srt" labe ...

Generate a fresh line within the source code

Currently, I am facing a challenge with dynamically loading CSS, JS, and other components as it appears messy when viewed from the source. Although this issue does not impact functionality, I am not satisfied with how it looks in the source code. When exam ...

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

Prevent the div from moving beyond the boundaries of its container while anim

After experimenting with a javascript image panner that I put together from various code snippets, I have decided to switch to a simpler approach. However, I need some guidance on a few things. Below is the code for the left and right buttons: <div id ...

Save the session ID in localStorage instead of a cookie

After successfully logging into my PhoneGap app, everything functions properly. I can send requests within the current session and am authenticated. However, if I completely close the app and reopen it, my session is lost. The cookie containing connect.sid ...

Locate the beginning div tag within a string

I am attempting to identify the '<video' string within this variable that includes HTML content $string="<video autoplay="autoplay" loop="" muted="" poster="" preload="auto" style="width: 354.09836065574px; height: 600px; max-height:600px; ...

Implement SCSS in Next.js 12 using Bootstrap

Ever since updating Next.js to version 12, I've been encountering issues with Bootstrap and SCSS integration. In my project, I have a global.scss file that is imported in the _app.js. Within this file, I include imports for Bootstrap and Bootstrap Ic ...

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

Bringing HTML into Excel with VSTO

I have encountered an issue while trying to import data from HTML files into Excel using VSTO (VB.NET). I am facing errors as I attempt to parse the HTML, and since I am new to this process, I need assistance in figuring out where my code is incorrect. I ...

Is there a way to customize the CSS of a Bootstrap 4 data table

I recently incorporated a library from Bootstrap Datatables into my project. However, I'm having trouble modifying the CSS for the search bar and 'Excel' button. Is there a way for me to customize it with my own CSS? https://i.sstatic.net/x ...

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...