What's the best way to make div columns appear closer together when floating?

Check out My CodePen: http://example.com/codepen

Hello there, today I am working on a 6-column layout with 3 columns in each row. The 3rd column is quite long and resembles a sidebar.

According to the design, columns 4 and 5 should be positioned close to the bottom of columns 1 and 2, with a padding of 10px.

The issue I'm facing is that due to all the elements being floated left, there is too much space between the bottom of columns 1 & 2 and the top of columns 4 & 5 because of the long 3rd column.

I would like to maintain the current positioning of the divs as is for responsive styling on smaller browser windows. Is there a simple solution to achieve this or would I need to nest column 4 under column 1 and column 5 under column 2? Then possibly use jQuery to reposition them as the screen sizes change?

Current Challenge:

Desired Layout:

csshtmlcss-float

Answer №1

One effective approach is to wrap col1-col4, col2-col5, col3-col6 and set the wrappers to float left.
For responsiveness based on screen resolution, consider using @media queries and respond.js.

Here is a simplified guide on what needs to be done:

HTML 

<div class="wrapper1">
<div class="col1">content here</div>
<div class="col4">content here</div>
</div>

<div class="wrapper2">
<div class="col2">content here</div>
<div class="col5">content here</div>
</div>

<div class="wrapper3">
<div class="col3">content here</div>
<div class="col6">content here</div>
</div>

CSS 

.wrapper1, .wrapper2, .wrapper3{float:left;}

Check out updated CodePen demo
Learn more about respond.js and CSS media queries

Answer №2

If you're looking to create a masonry layout, there are a few different routes you can take. One option is to utilize a Javascript/jQuery plugin such as jQuery Masonry, which will ensure consistent functionality across all browsers. Another approach is to go with a CSS-only solution by using CSS columns, as outlined in the linked article. Keep in mind that this method may not be fully supported on IE9 and older versions. Ultimately, these are the primary methods for achieving the desired masonry layout you're after.

Answer №3

Check out this awesome resource:

I hope you find this helpful :)

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

Color the area entirely in black

I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...

htmlcss

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

htmlcss

AngularJS: resolving route dependencies

I have a variable $scope.question that contains all the questions for the page. My goal is to loop through the questions page by page. To achieve this, I created a function called questionsCtrl and I am calling this function in the config while setting up ...

javascriptjqueryhtmlangularjs

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...

javascriptjqueryhtml

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

javascriptandroidhtmlwebview

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

Explanation: The information box does not appear when the mouse hovers over it

Welcome to the gallery showcasing a unique calendar design with tooltip functionality. This calendar features a special hover effect for New Year's Day on January 1st, displaying a tooltip text upon interaction. Feel free to explore the code below to ...

htmlcsshovertooltip

How to handle the "Escape" character in PHP using the echo statement?

A quick question: echo '<button type="button" id="add" onClick="addAsset('.$filename.');"> '.$filename.' </button>'; This piece of code generates a button with an onClick event that adds the asset example.png. Ho ...

phphtmlescaping

Position the label and the select dropdown side by side within the sweetalert 2 component

Can anyone provide an example of aligning a label and dropdown in the same row using sweetalert2? I attempted to customize the label placement, but it appears on a separate line. I would like to log the selected dropdown item upon clicking the OK button. ...

javascripthtmlcssangularsweetalert2

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

Displaying vertical content with a horizontal scroll using Bootstrap

I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: The issue I am facing is that by using the code below, I end up with ...

csstwitter-bootstrapbootstrap-4

Animating colors with jQuery and shifting SVG shapes to create dynamic and

I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...

javascriptjquerycssanimationsvg

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

htmlvue.jsv-for

Header text aligned with image to accommodate parent size

Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs ...

htmlcss

I would like to style the input checkbox using CSS

Is there a way to style input checkboxes with CSS that will work on all browsers (Chrome, Firefox, IE 6, 7, and 8)? If jQuery is the only solution, please let me know. It needs to be compatible with all browsers. Can anyone provide guidance on how to ach ...

jqueryhtmlcssinputcheckbox

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

htmlcsstwitter-bootstrap

Utilizing JavaScript to trigger an alert message upon selecting various options and blocking the onclick event

Setting up a simpleCart(js) with selectable options presents a challenge. The task at hand is to display an alert if not all drop-downs meet specific requirements and to prevent the "Add to cart" button from adding items to the cart when these conditions a ...

javascripthtmlalerthtml-select

ensure that the element matches the height of its parent element

Allow me to illustrate the issue with a visual aid. In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmar ...

css

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

Using values from a designated line within the textarea to successfully submit a GET form

How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...

javascriptjqueryhtmlajax