Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example:

By default, HTML elements are displayed horizontally like this:-

#container {
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid green;
    padding: 4px;
}
#secondcolumn {
    position: absolute;
    margin-left: 200px;
    margin-top: -90px;
}
#secondcolumn > span {border:1px solid red;}
#container > span {border:1px solid blue;}
<div id="container">
<span>1.</span>
<span>I am flowing horizontally.</span>
<span>2.</span>
<span>I am flowing horizontally.</span>
<span>3.</span>
<span>I am flowing horizontally.</span>
<span>4.</span>
<span>I am flowing horizontally.</span>
<span>5.</span>
<span>I am flowing horizontally.</span>
<span>6.</span>
<span>I am flowing horizontally.</span>
<h4>Elements have to flow like this:-</h4>
<span>1.</span>
<span>I am flowing vertically.</span>
<br>
<span>2.</span>
<span>I am flowing vertically.</span>
<br>
<span>3.</span>
<span>I am flowing vertically.</span>
<br>
<span>4.</span>
<span>I am flowing vertically.</span>
<br>
<span>5.</span>
<span>I am flowing vertically.</span>
<div id="secondcolumn">
<span>6.</span>
<span>I am flowing vertically.</span>
<br>
<span>7.</span>
<span>I am flowing vertically.</span>
<br>
<span>8.</span>
<span>I am flowing vertically.</span>
</div>
</div>

Organizing Elements from Top to Bottom rather than Left to Right (float: down?)

javascriptjqueryhtmlcss

Answer №1

My recommendation is to utilize flex in the following manner:

#container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 400px;
    height: 100px;
    border: 1px solid green;
    padding: 4px;
}

#container > span {border:1px solid blue;}
<div id="container">
<span>1. I am flowing horizontally.</span>
<span>2. I am flowing horizontally.</span>
<span>3. I am flowing horizontally.</span>
<span>4. I am flowing horizontally.</span>
<span>5. I am flowing horizontally.</span>
<span>6. I am flowing horizontally.</span>
<span>7. I am flowing horizontally.</span>
<span>8. I am flowing horizontally.</span>
<span>9. I am flowing horizontally.</span>
</div>

Answer №2

One way to achieve the desired layout is by using display: block on a span element. Here's an example:

To keep '1.' and 'I am flowing horizontally' in the same line, simply place them within the same span.

#container {
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid green;
    padding: 4px;
}

#container span{
    display: block;
}
#secondcolumn {
    position: absolute;
    margin-left: 200px;
    margin-top: -90px;
}
#secondcolumn > span {border:1px solid red;}
#container > span {border:1px solid blue;}
<div id="container">
<span>1.</span>
<span>i am flowing horizantally.</span>
<span>2.</span>
<span>i am flowing horizantally.</span>
<span>3.</span>
<span>i am flowing horizantally.</span>
<span>4.</span>
<span>i am flowing horizantally.</span>
<span>5.</span>
<span>i am flowing horizantally.</span>
<span>6.</span>
<span>i am flowing horizantally.</span>
<h4>Elements have to flow like this:-</h4>
<span>1.</span>
<span>i am flowing vertically.</span>
<br>
<span>2.</span>
<span>i am flowing vertically.</span>
<br>
<span>3.</span>
<span>i am flowing vertically.</span>
<br>
<span>4.</span>
<span>i am flowing vertically.</span>
<br>
<span>5.</span>
<span>i am flowing vertically.</span>
<div id="secondcolumn">
<span>6.</span>
<span>i am flowing vertically.</span>
<br>
<span>7.</span>
<span>i am flowing vertically.</span>
<br>
<span>8.</span>
<span>i am flowing vertically.</span>
</div>
</div>

Answer №3

One way to achieve this is through the use of css flexbox, however, it may not be compatible with outdated browsers.

.container {
  position: absolute;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 1px red;
}

.container > div {
  width: 50%;
  border: solid 1px blue;
}
<div class="container">
<div>
<span>1.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>2.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>3.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>4.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>5.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>6.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>7.</span>
<span>i am flowing vertically.</span>
</div>
<div>
<span>8.</span>
<span>i am flowing vertically.</span>
</div>

For a list of supported browsers, you can visit: https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

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

A fatal error has occurred in Node as it is unable to set headers after

Just getting started with nodeJs and I'm attempting to read a file from the system. It seems like I can view the file content in the console, but for some reason it's not displaying in the browser. Any ideas what I might be overlooking? var myD ...

javascriptnode.jsexpress

AngularJS - Enhance table row visibility with ngRepeat for targeted highlighting

Example Data <table class="table table-condensed table-striped table-responsive"> <thead> <tr> <th>Sender</th> <th>Subject</th> <th>Received</th> <th>Actions&l ...

htmlangularjstwitter-bootstrap

Send the Entity's identification number to the Controller using Ajax

What is the most effective method for transmitting an object's identifier via ajax to the Server / Controller? For example, when we are on the page "book/edit/mybookname" and want to update the book entity "mybookname" using ajax. I have considered v ...

phpjqueryajaxsecurityparameter-passing

Could there be an issue with my function parameters, or is there another underlying problem?

Hey there! I've been working on this function, but it doesn't seem to be running quite right. Here's the code: function chooseCols(colTag, tagName) { // Set column name var column = $('.tagChooser:eq(&apo ...

javascriptjqueryfunction

Using arrow functions in Vue Pinia getters to access other functions

sample shop getters: { setNewName: (state) => (string: string) => { state.user.username = string; }, updateUser: (state) => { setNewName('Tom'); // setNewName is not defined. } } Is there a way to access ...

javascriptvue.jspinia

What is the best way to avoid multiple triggers of an event listener in a Vue Js Component?

When I use an event listener to call a specific function, it behaves strangely. Here is the code snippet: mounted() { window.addEventListener("message", this.call); }, methods: { call(e){ if (e.data === "test"){ ...

javascriptvue.js

Step-by-step guide on completing and submitting a form through a Windows application

Many are questioning the age and repetition of this query, but here is where my issue begins. Are you noticing two input fields with the same name? HTML CODE <html> <head><title></title> </head> <body> <input type= ...

c#htmlwindows

Cryptocurrency price tracker with sleek Bitcoin symbol and FontAwesome icons

My assignment involved creating a function that retrieves Bitcoin trades from a JSON URL, allows users to change the interval with buttons, uses fontawesome arrows to indicate rate changes (up/down/no change), and displays the data on a website. Everythin ...

javascriptfont-awesomebitcointicker

Monitor the DOM for visibility changes in Selenium WebDriver and PjantomJS before proceeding

I am currently creating automated test scripts using selenium-webdriver, phantomJS, and mocha. The script file I'm working with is a JavaScript file. My goal is to wait until an element (<a>) is fully visible before clicking on it. Let me pro ...

javascriptselenium-webdriverphantomjsmocha.js

Ensuring button is inactive when API value is zero in Vue

Presented here are a set of buttons that provide live probability odds for a particular event, allowing users to make selections based on the updated data fetched from an API every minute. https://i.stack.imgur.com/uGdld.png If the probability displayed ...

jqueryvue.jsaxiosvuejs3

Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than ...

htmlcssfluid

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Determining the starting and ending position of text within an element using jQuery

Delving into the world of jQuery/JS has been both challenging and exciting for me. However, I've encountered a problem that's got me stumped. Here is a snippet of text that I need to work with: blablablabla <b data-start="" data-end="">#fo ...

javascriptjquery

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

When monitoring my backend, I constantly check the remaining time before the JWT expires, which is set to 15 minutes. If there is only one minute left or less, I generate a new JWT and include it in the response header as a setToken. The front-end can then ...

javascriptnode.jsexpressjwt

Using AngularJS client and Flask server for a RESTful call, one can include the

I am currently facing an issue where I need to send a REST request from my AngularJs client to a Flask server. The problem arises when one of the ids (key) in the request contains a forward slash. Interestingly, if the key does not contain a slash, the re ...

javascriptpythonangularjsrestflask

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Check out this code snippet. var items = ["Laptop", "Tablet", "Smartphone", "Headphones", "Camera"]; var costs = [599.99, 299.99, 799.99, 149.99, 499.99]; displayItems = ""; totalCost = 0; for (var j = 0; j < items.length; j++) { displayItems += " ...

javascripthtmljquery

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

javascriptjqueryhtmlcss

Do not continue submitting if the innerHTML matches the specified value

I am currently working on a web page that verifies if an email entered by the user is available in the database. If it is, I need to prevent the form from being submitted. To achieve this, I have implemented Ajax for real-time checking of the email and di ...

javascriptjqueryajax