Floating elements with varying heights cause adjacent elements to be pushed downwards

I'm dealing with 6 elements that I want to display in two rows of 3 each by floating them. However, the content of each element varies in height, causing layout issues when a taller element disrupts the float of its siblings:

Check out this example CSS:

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

and HTML:

<figure>
  <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
  <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus mollitia distinctio voluptates vitae atque vel soluta libero...</figcaption>
</figure>
... (repeat for kittens 2-6)

Here's a link to a JSFiddle with the issue: http://jsfiddle.net/KatieK/5Upbt/

Any ideas on how to ensure the second row of figure elements align properly below the first 3?

I'm looking for HTML/CSS solutions over JavaScript/jQuery fixes.

htmlcss

Answer №1

Looking for a solution using just CSS? Try adding the following rule:

figure:nth-of-type(3n+1) {
        clear: left;
    }

View the jsFiddle demonstration

Answer №2

To efficiently clear every fourth element, you can utilize the :nth-child pseudo class.

figure:nth-child(4n){clear: left;}

UPDATE:

If using 4n doesn't quite achieve the desired outcome, consider using 3n + 1 instead.

figure:nth-child(3n + 1){clear: left;}

Explore a demonstration here

Answer №3

After conducting thorough testing, I have devised a solution that worked effectively: http://jsfiddle.net/5Upbt/7/

I made modifications to the figure style as follows:

figure { display: inline-block; vertical-align: top; width: 30%; margin-left: 1%; font-size: small; outline: solid #999 1px; }

This solution is derived from a more broad approach found here: http://jsfiddle.net/bazmegakapa/Ft9d2/

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

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

htmlcsstinymce

Struggling to make rCarousel function properly due to navigation width and autoscroll issues

I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly. Despite following the instructions on , I'm still no ...

jqueryhtmlcsscarousel

Is it possible to ensure that an <a href stays at the top of the page with jQuery

I have implemented the supersized plugin to display a rotating fullscreen image background that includes <a> tags. However, since it is positioned behind my site content, the images cannot be clicked. I am curious if there is a way to bring an < ...

jquerycss

Advancing to the subsequent page during the scraping process

Transitioning to the following page during web scraping and adjusting the date format url_list contains a compilation of URLs, one of which is I have noticed that there is an href code to navigate to various years and pages, but I am encountering difficu ...

pythonhtmlweb-scrapingbeautifulsoup

Ways to prevent browser scrolling on smartphones and tablets

Having a simple HTML file with an iframe embedded, I have been attempting to prevent my browser from scrolling in both documents. However, this solution works intermittently and does not provide consistent results. I have tried applying various event list ...

javascripthtmlweb-applications

Center alignment is not being applied to the divs with the Bootstrap class .justify-content-center

I have been attempting to insert a search form into two parent divs. No matter how I apply the align or justify utility, I am unable to center the search bar in the middle of the page as desired. <div class="col"> <div class"con ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

Upload several files sequentially in a form on a website using Selenium with Python

I need to automate the process of inputting multiple files from a folder into a website and running an online job for each file. Currently, I can only input one file at a time using this code snippet. from selenium import webdriver url = "http://www.exam ...

pythonhtmlseleniumfile-uploadinput

Increase the thickness of the scrollbar track over the scrollbar thumb

I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite. Is it possible to have a scrollbar track that is thicker than the scrollbar thumb? ...

javascripthtmlcss

I am attempting to design an HTML page to serve as the body of an email. Can anyone advise me on how to effectively pass it into my setBody() function while using yiiMail?

On one of my .php pages, I have the following code snippet: <html> <head></head> <body> Hi <?php echo $user['first_name'].' '.$user['last_name']?>, <br><br> To reset your ...

phphtmlemailyii

What is an alternative way to make elements overflow on top without relying on position: absolute when using overflow: hidden?

I'm currently exploring React and I'm interested in implementing an animation using react-collapsed to collapse the upper portion of a specific component. As of now, the container size is reduced to half of the child's size and overflow: hi ...

htmlcssreactjsweb

Tips on deleting a section of text inside a div

I have a DataTables implementation that is displaying an input inside a label element like this: <label> Search: <input type="search" class="" placeholder="" aria-controls="example"> </label> My goal is to remove the "Search:" t ...

jqueryhtmldatatables

Unable to access a frame inside an iframe and frameset using JavaScript when both domains are identical

I am attempting to use JavaScript to access an HTML element within a nested frame in an iframe and frameset. The structure of the HTML is as follows: <iframe id="central_iframe" name="central_iframe" (...)> <frameset cols="185, *" border="0" ...

javascripthtmldom

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

javascripthtmlangulardatetypescript

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

How to distinguish between clicking once and double clicking in jQuery

Currently, I am developing a basic tic tac toe game for two players with the help of jQuery. The main requirement is to insert an "X" when the user single clicks and an "O" when they double click on the designated square. Here is how I achieved this functi ...

jqueryhtmlwebweb-applications

how to use beautifulsoup to insert a new tag within a text block

When a browser encounters the text www.domain.com or http://domain.com/etc/ within an HTML text section, it automatically converts it into <a href="http://www.domain.com">www.domain.com</a> or <a href="http://domain.com/etc/">http://domai ...

pythonhtmlbeautifulsoup

Having difficulties creating an array due to identical id tags causing HTML to break in JavaScript

I've been grappling with this issue all day. Before delving into dynamic solutions, I'd like to create multiple divs with unique id tags or classnames rather than repeating ids. Whichever option proves simpler would be greatly appreciated. Curren ...

javascripthtmlarraysjson

Does "br" not play well with flexbox?

After creating a table using flexbox, I made an interesting observation: the br element seems to have no effect within the flexbox. For example: .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: ...

htmlcssflexbox

Is it permissible to include two lines with <meta name="keyword" in them?

I'm not sure if this is unconventional, but can I have two lines in an HTML file with <meta name="keyword" tags? If so, are there any consequences of doing so? And if not, why? ...

htmlkeywordmeta

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui