What is the best way to align these boxes so they fit perfectly together?

check it out here

code snippets

<div id="container">
<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio.. </div>
<div class="box">Fusce a metus eu diam varius congue nec nec sapien. Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada vehicula lectus, viverra sodales ipsum gravida nec. Integer gravida nisi ut magna mollis molestie. Nullam pharetra accumsan sagittis. Proin tristique rhoncus orci, eget vulputate nisi sollicitudin et. Quisque lacus augue, mollis non mollis et, ullamcorper in purus. Morbi et sem orci. Praesent accumsan odio in ante ullamcorper id pellentesque mauris rhoncus. Duis vitae neque dolor. Duis sed purus at eros bibendum cursus nec a nulla. Donec turpis quam, ultricies id pretium sit amet, gravida eget leo. 
</div>
<div class="box">Vivamus vulputate mattis magna ac pretium. Nulla facilisi. Praesent ut quam quam. Suspendisse non lorem at ligula convallis convallis. Phasellus varius, felis nec ultrices pulvinar, tortor massa semper nunc, id auctor elit felis eget libero. Sed in turpis quam. In ultrices, eros sit amet vehicula mattis, nisi nisi tincidunt neque, a imperdiet lorem nibh eget libero. Vivamus tempus nunc odio, ut iaculis nunc.</div>
<div class="box">Donec vel sapien lacus, sed lobortis nisl. Integer a dui nulla, non convallis massa. Quisque posuere loborti...
</div>
</div>​

styles

#container { 
    width: 500px;
    border: 1px solid black;
    margin: 0 auto;
    overflow: auto;
}
.box {
    width: 45%;
    margin: 5px;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    border: 1px solid green;
}
​

I want to make sure that the 3rd box ("Vivamus vulputate") aligns closely with the first box ("Lorem ipsum").

I'm aware there's a way to achieve this with CSS tricks, I just can't recall how...

htmlcss

Answer №1

The evolution of the internet has given rise to innovative solutions like jQuery Masonry:

Your current layout may not support your desired outcome, but a workaround could involve specifying left columns with float:left; clear:left; and right columns with float:right; clear:right; ...

See the result:

http://jsfiddle.net/TcvFp/3/

Answer №2

Believe it or not, there is a form of magic in the world of web design known as CSS columns: http://jsfiddle.net/JyVUD/ (instructions for making it work in different browsers are provided).

Unfortunately, like with all magical things, not every browser is on board - IE, for example, doesn't support it.

Answer №3

Implemented using JavaScript Fiddle, I decided to keep it simple (although I would have preferred to use mootools) since that's how you set up the Fiddle.

It functions properly, but I believe there is room for improvement and it may not be fully compatible across all browsers. Nonetheless, I am sharing so you can review.

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

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

javascriptjquerycss

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

htmlcss

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Tips for sending a value or props to a CSS file

Is there a way to dynamically update the x and y position based on user clicks, and then apply these changes to the top and left properties of a div? .dataCardAbsolute { position: absolute; top: 100px; left: 300px; overflow: auto; } React.useEffec ...

cssreactjs

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

Timepicker Bootstrapping

I've been searching for a time picker widget that works well with Bootstrap styling. The jdewit widget has a great style, but unfortunately it comes with a lot of bugs. I'm on a tight deadline for my project and don't have the time to deal w ...

javascripthtmltwitter-bootstraptimepicker

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

jqueryhtmlcss

Import css background-images from a separate local directory that is located outside the root directory of the Next JS

I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...

javascriptcssreactjsnext.js

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...

javascripthtmlcss

While using Tcpdf, I encounter an issue where the textarea value I pass is not being printed in the desired format

Currently, I am experimenting with TCPDF to create PDF files from HTML. However, I have encountered an issue where passing a variable containing text results in the text being printed on separate pages for each line. Is there a way to ensure that the tex ...

phphtmltcpdf

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

I have a school project where I am creating a quiz-game web page. Each question will have 4 possible answers. The questions, along with their 4 answer choices and the correct answer, are randomly selected from a database. However, I am facing an issue w ...

phphtmlmysql

I require assistance in troubleshooting and repairing my HTML and JavaScript code

I am working on creating a feature where users can input their upcoming birthday date and receive an alert showing how many days are left until then. However, I encountered an issue where the alert displays NaN (Not a Number) before the birthday is entered ...

javascripthtml

Conceal the parent element if there are no elements present within the child element

Look at the markup provided: <div class="careersIntegration__listing" id="careers-listing"> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegrat ...

javascripthtmljquery

Tips for replicating input boxes in a while loop

HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="countryname[]" id='countryname_1 ...

javascriptphpjqueryhtml

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Extracting Tik Tok videos from their URLs using PHP web scraping

I'm attempting to save videos from the following URL: Original: https://api.tiktokv.com/aweme/v1/playwm/?video_id=v09044340000bq0vmd39if221ld9o5n0 The link then changes to this: http://v16m.tiktokcdn.com/e50056249a925719f71ce8618053e173/5eee4e39/vid ...

phphtmlvideo

Unable to add to content that is generated dynamically

Upon loading the page, I noticed that the #navbarUsername field remains empty while all other scripts below it run correctly. Despite attempting to use $(document).on('ready', '#navbarUsername', function () {..., this did not resolve th ...

jqueryhtml

Troubleshooting: Scrollspy Bootstrap 4 functionality not functioning properly on Codepen

I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...

htmlbootstrap-4scrollspycodepen

Should I open the Intel XDK hyperlinks in the default web browser instead of

Lately, I've been developing an HTML5 app on the Intel XDK that includes buttons linking to external websites. However, I'm encountering an issue where the apps open in the same window, leading users to get stuck in the browser. Currently, I am u ...

androidjqueryhtmlbrowserintel-xdk