Floating box layout with dual columns and empty space

I have a collection of X posts, each with a set width but varying heights. I am trying to organize them into two columns within a single div-wrapper. However, when I align them all to float left, it results in unwanted blank spaces between the posts.

Any suggestions on how to eliminate this extra space?

Answer №1

Make sure odd blocks clear:left and even blocks clear:right!

<style type="text/css>
    .odd { float: left; clear: left; }
    .even { float: right; clear: right; }
</style>

<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>

Answer №2

Apply the CSS rule :nth-child(odd) {clear:both;}

See the live DEMO here

Cascading Style Sheets (CSS)

.container {border:solid #f00; padding:10px;overflow:auto}
.container div{border:solid 1px #f00; float:left; margin:5px}
.container div:nth-child(odd) {clear:both;}

HyperText Markup Language (HTML)

<div class="container">
  <div>
    Placeholder text for content<br>More content goes here.<br>Also, more content here.<br>And some more content.<br>Additional content.</div>
<div>
     Another set of content individuals.
</div>
<div>
     Some different collection of content items.
</div>
<div>
     Miscellaneous content information.
</div>
<div>
     Last set of random content.
</div>
  </div>

Answer №3

For best results, insert the following code after the second block:

<div style="clear:both">&nbsp;</div>

This addition should solve the issue.

Answer №4

It's a good idea to create separate left and right div containers for your posts instead of relying on the float: left property...

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

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

Every outcome was displayed within a table format rather than as individual rows

I'm having trouble with my PHP code for search. The result is not displaying in a single table with rows, as expected. I attempted to modify the PHP by changing `'<td>','<div>' . $row['$accountcode']. '&l ...

What is the best way to conceal all lists except for the one that has been chosen?

Looking to enhance my sortable list with jQuery UI - currently it's functional, but I'd like to incorporate a dropdown menu for each item to designate the active one when clicked. Is there a way to modify the code so that upon selection, only th ...

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

Move the iframe to the back on Internet Explorer

I am currently in the process of creating a webpage that features a popup div (utilizing javascript/jquery) to display some text. However, I am encountering a problem where, in Internet Explorer, a youtube embedded video (iframe) remains in front of the po ...

Discover the interactive world of HTML5 Canvas on iPhone with exciting highlights triggered by touchstart or mousedown

The canvas changes to a darker color when touched and held, reverting back to normal when the touch is released. This effect is similar to how hyperlinks are highlighted on an iPhone, not like text selection. To implement this feature, I am using jQuery t ...

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

Increasing the size of the center image by using CSS elements placed along the circumference

Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link. I have attempted to adjust the circle size but it ends up affectin ...

Initiate animation on command with either Jquery or JavaScript

I have a special notification display box that showcases errors on my website .flash { height: 75px; position: fixed; top: 20px; right: 20px; z-index: 10; background-color: #ffffff; box-shadow: 0 0 30px 2px #dddddd; -webkit-animation: flas ...

The Chart.js graph fails to appear when placed within an ngIf directive

I have encountered an issue with my simple scatter line chart created using Chart.js within a bootstrap panel. It works perfectly fine until I place it inside an ngIf div. Has anyone faced this problem before? Is there a solution to make the chart display ...

Foundation Framework sidebar by Zurb

My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...

Google's local host connection is currently being refused

Recently, as I was practicing HTML code to work on some forms, I encountered an issue when trying to run the code in the browser by pressing F5. Instead of seeing my code displayed, I received an error message that read: This site can’t be reached local ...

No feedback received after sending keys using Selenium

Whenever I execute my code using PhantomJS and Selenium, the result appears to be correct. However, when it comes to using send_keys function, the code gets stuck without any errors, answers, or progress. I am puzzled and eager to find out why this is ha ...

Is there a way to have a single background image fill the entire screen?

Can someone help me with my Offcanvas navbar created using Bootstrap? I added a background image from Google as the URL, but instead of one whole piece, it's appearing as 6 duplicate images. What could be the issue here? I tried looking for solutions ...

Placing divs of varying heights in a circular formation with a specific radius

Recently, I've been attempting to generate a multitude of divs (referred to as bars) and position them in a way that forms a circle in the center. To clarify, here's an example where all bars share the same width and height. Check out the JSFi ...

Looking for Efficiency in Basic JavaScript Arithmetic Operations

I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...

Enhance your viewing experience by clicking on photos to enlarge them with

Is there a way for me to click on a photo and have it zoom in? Similar to how it works on this website --> I only need one specific photo to zoom in, not a whole gallery. Can anyone assist with this? <img src="images/uploads/phs.jpg"></img&g ...

Tips on how to customize an HTML form submission appearance

Take a look at my file upload form below: <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> </form> I am trying to figure out ...

Add a foundation to this CSS pyramid

After experimenting with a demo I discovered at the following link: http://codepen.io/singhiskng/pen/dqiGj My goal is to create a four-sided pyramid. <div id="pyramid-container"> <div id="pyramid"> <div class="fac ...

Achieving Title Alignment in PDF Export with Balkan OrgChartJS

function preview() { /*centerElement();*/ let fileNameWithTitle = MyTitle.replace(/\s+/g, '_'); let PdfTitle = "<center>" + MyTitle + "</center>"; OrgChart.pdfPrevUI.show(chart, { forma ...