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

What methods can be used to control access to document.styleSheets data, and what is the purpose behind doing so?

Recently, I came across the document.styleSheets API, which allows you to access stylesheets used by a website. Using this API is simple, for example, document.styleSheets[0].cssRules will provide all CSS rules for the first stylesheet on a page. When I t ...

javascriptcss

Discover the impact of images.google.com on enhancing your image gallery

I am currently working on creating a website that features an image gallery. When a user clicks on a thumbnail, I want a hidden div to slide out and display more information about the image, possibly even including a slideshow. After extensive searching o ...

jqueryhtmlcssimage-gallerygoogle-image-search

Center the content of the HTML body

Despite my best efforts, I seem to be making a mistake somewhere. While creating a bootstrap website at , the site appears well and aligned in the center. However, when I try to adjust the screen size to less than 850px or even smaller, all the content shi ...

phphtmlcsstwitter-bootstrap

Tips for ensuring an image fits perfectly within a MUI grid

I am currently working on an application that involves a collection of cards. My tech stack includes React and MUI v5. One issue I've been facing is with the grid layout, specifically in trying to keep the image size consistent within the grid item. ...

cssreactjsimagematerial-ui

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

Creating an online bidding platform using ASP.Net, MVC 5, and Entity Framework

Having recently delved into the world of ASP.NET, I am in the process of developing a basic auction site for a charitable cause. Utilizing MVC 5 and Entity Framework with Code-First approach for database management. The core of this project is the Item mo ...

asp.netasp.net-mvchtmlentity-frameworkrazor

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

The nested div within the ui-view element is failing to expand to the entire width of the window

I am facing a challenge in making a child div stretch to the entire width of the window, rather than just the width of its parent. I am incorporating AngularJS with UI-Router, and I'm not sure if that is causing the issue. Attached is a screenshot. ...

javascripthtmlcssangularjs

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

Find all paragraphs with the CSS property "background-color" using JQuery

My task involves modifying the CSS of a paragraph tag that has a background color of #aaddff. The code I have written seems to be missing something, as the border is not appearing as expected. Should I use element.style or is there a different approach I ...

jquerycss

Switch the ng-bind-html option

Dealing with a string in my scope, I must determine whether I want the HTML escaped or not. A boolean value helps to decide if the HTML should be escaped or left as is. Snippet Check out some of my code examples below: $scope.result = "<b>foo</ ...

javascripthtmlangularjsng-bind-htmlng-bind

Display a div when hovering over another div

I have a menu that looks like this: https://i.sstatic.net/WqN33.png and I want to create a hover effect where another div shows up over each item, similar to this: https://i.sstatic.net/JRaoF.png However, I can't seem to figure out how to implemen ...

javascripthtmlcssvue.js

Ways to establish a default search outcome in a search box

Looking to create a search bar with JavaScript and JSON to display default search results for visitors. Currently, the search bar only shows results after text is removed. How can I show predefined search results when the page is loaded? const search = ...

javascripthtmljson

Google Fonts are displaying in a bold style even when the bold property is not set

I need assistance with an issue involving emails going from Salesforce to Outlook 365. Here is the HTML code snippet: <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <style> body ...

htmlemailoutlookgoogle-font-api

Easiest Method for Expressing Mathematical Fractions

Math equations are an important aspect of my work, and I often use MathJax as a tool to create professional-looking formulas (check out more about it here). It basically functions like an html language. <script type="text/javascript" src="http://cdn.ma ...

htmlmathjax

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...

htmlcsstwitter-bootstrapangularbootstrap-4

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box