Aligning float:left divs vertically

I have multiple divs with equal widths but varying heights that I need to fit together tightly.

When I set them to float left, they don't align vertically but instead line up at the bottom of the row above.

Even with the example below, I want to eliminate the white space. Any suggestions on how to achieve this? I am constrained to this format due to the externally delivered content.

Thanks!

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>
csshtmlcss-floatvertical-alignment

Answer №1

Experiment with placing the first item on the left, then the next one on the right, followed by another on the left, and so on ....

UPDATE - Addressing the feedback received.

If you are aware of the maximum number of span's you will ever retrieve (and assuming it's not significantly more than the mentioned 10, as this approach could become complex quickly), and if utilizing CSS3 is not an option, you could consider implementing something similar to this,


<style>
    span, /* all spans are assigned display and width properties, odd spans are floated left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans are floated right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

You would have to continue adding span+span+...'s until you have covered the maximum number of consecutive spans anticipated. The example above only accounts for eight. Therefore, it may not be the most elegant solution!

Answer №2

Your situation requires further explanation.

If the elements always have consistent heights, you can manually set their layout. To adjust your design:

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

However, if the heights are randomly determined, you can organize them in stacks of 3 or 4 with uniform width. Here's how you can align them vertically:

<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></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

Ensure that pressing the ENTER key on a form will only activate a specific submit button, even when there are multiple buttons present

I have a form containing two submit buttons - name="submit_button" and name="search_me_logo". Depending on which button is pressed, the form should perform different actions when it reaches the action location. Currently, when the enter key is pressed, th ...

javascriptphphtmlforms

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

csssassnext.jstailwind-css

Starting with HTML5 can be a bit overwhelming, especially when it comes to compatibility with older systems

I am intrigued by the vast array of new possibilities available, but I find myself lacking in knowledge when it comes to Html5. One way to minimize the usage of IE6 and propel us into a more advanced era is to fully embrace new technologies like HTML5. Ho ...

htmlcompatibility

Incorporating a background image into a Material UI theme with CSS styling

When customizing a theme in material UI, one can adjust or override it using the function createMuiTheme. Below is the complete file where this process is carried out: import { createMuiTheme } from '@material-ui/core/styles'; import purple from ...

cssreactjsmaterial-uibackground-imagetypeerror

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

javascriptcssreactjswebpacksass

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Inner Content Attribute Reveals the Markup within a Text

Hello, I am in the process of developing a simple CMS that generates blogs. The user is required to enter the blog content themselves, and I am allowing them to do so using the TinyMCE editor. I save this content in a database where the data type for the ...

htmlasp.netvb.netcontent-management-systeminnerhtml

JavaScript recording speed

I am currently working on a project that involves video recording on my website. After creating a canvas and pushing the recorded frames to it, I have encountered an issue. The playback of the video is too fast - a 10-second video plays in around 2 second ...

javascripthtmlangularjsvideorecording

What is the best way to extract information from a website and save it directly to Google Sheets? Specifically interested in current data from an environmental monitoring system

I have a unique environmental monitoring device that I acquired from a company that has since shut down. This device is equipped with an NDIR CO2 sensor, temperature, and relative humidity sensors. In addition, it features an ethernet port and a built-in w ...

pythonhtmlscreen-scrapingiot

Customize your Bootstrap 4 accordion cards with added margin and a sleek design without the usual bottom

After incorporating Bootstrap's accordion component, I made a custom adjustment by including spacing between the cards to achieve this layout (the - and + symbols were my addition and not important here): https://i.stack.imgur.com/5nRrP.png However, ...

htmlcssbootstrap-4

The "getJson" function fails to execute when attempting to run a Python

I've come across a simple code snippet, but for some reason, my getjson function isn't working as expected. My Python script properly prints a JSON encoded value. Does anyone have any suggestions? HTML <!DOCTYPE html> <html> <h ...

javascriptpythonhtmlgetjson

Select a specific date range from a form and export CSV file containing MySQL data within that range

I have successfully implemented a database CSV export functionality, but now I am looking to allow the user to specify a date range for the export process. Below is the HTML section that handles the date selection (date format: mm/dd/yyyy): <form act ...

phphtmlmysqldatabase

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

phphtmltextnullecho

Tips for adding a placeholder in a login form on Drupal 7

Can anyone help me set a placeholder for a horizontal login form in Drupal 7? I want the placeholder text to disappear when clicked on, and I want it to display 'username' and 'password'. Here is the current code for the form. Thank you ...

javascriptphpcssformsdrupal-7

Website errors appear on the hosted page in <body> section without being present in the code

Hello there, I have set up a debug website using my "Olimex ESP-32 POE" to send internal data via JSON, eliminating the need for Serial Output from the Arduino IDE (the reasons behind this are not relevant). #include "Arduino.h" #include <WiF ...

javascripthtmlc++jsonesp32

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

javascriptjquerycsswindows-phone-7jquery-mobile

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

Customize your search experience with Google Custom Search Engine for Internet Explorer

Currently, I am integrating Google Custom Search (Business Edition) into my website using the Custom Element instead of the iFrame. I chose a theme that looks great on all browsers except for IE6. In IE6, the search results are displaying with the Promotio ...

csssearchinternet-explorer-6