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

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

javascripthtmlcss

What is the process for establishing the admin's username and password using a database table?

I recently developed a website that includes a login form for the administrator. I have set up an admin table in my database and filled it with values. However, when I attempt to log in, the password is not being recognized. Here is a snapshot of my curren ...

phphtmlmysqlsqllaravel

Mapping with Star Components

As a newcomer to ReactJs, my task is to create a 5-star review component with the ability to display half-star ratings. I previously implemented this in Angular5. Within the map method, I need to loop through the following elements: <!-- full star -- ...

cssreactjs

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

javascriptjqueryhtmlcssrepaint

Checking for the presence of an element prior to moving forward in a selenium and python script

Is there a way to create a loop that runs as long as a specific div element appears on a website? I am trying to navigate through several pages and click the "next" button for each page. The last page does not have the div element I am looking for, so I w ...

pythonhtmlselenium

Problem Encountered with Inaccurate Binding of Dynamic Form Control Values in Angular

UPDATE: Follow this link to access the editor for my Stackblitz application, which demonstrates a simplified version of the issue regarding the "transfer" of value between the first and second controls. I am currently developing a dynamic form in Angular ...

htmlangulardomangular-reactive-forms

Display words on screen and then alter hue using HTML and CSS

Is there a way to dynamically change the color of text inside <a> tags from black to red after a specific time interval and keep it permanently red? do { document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; awa ...

javascripthtmlcsstextcolors

Click on ng-click to sort through the blog entries

Currently, I am in the process of developing a blog utilizing AngularJS and JSON. Nearly everything is functioning as expected except for one particular filter item. As I am relatively new to Angular, it presents a bit of a challenge for me. The issue ari ...

javascripthtmlangularjs

Utilizing JavaScript for enhancing the appearance of code within a pre element

Is there a way to dynamically highlight the code inside a pre element using vanilla JavaScript instead of JQuery? I'm looking for a solution that colors each tag-open and tag-close differently, displays tag values in another color, and attributes with ...

javascripthtmlpre

Storing data collected from a Google form into an Excel spreadsheet

I have created a form using table layout. My goal is to automatically shift the focus to the next input field once the current one reaches its maximum length. I tried implementing this functionality with jQuery, but it only seems to work with inputs and no ...

javascriptjqueryhtmlcssgoogle-forms

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

How can I create a Bootstrap grid with four columns where the second column spans two rows? Hello, I am looking for help to achieve a portfolio grid layout with 4 columns (refer image here) and have the second column span 2 rows. I plan to include images ...

jqueryhtmlcsstwitter-bootstrapportfolio

Accents marked with diacritics are not being detected + An issue occurred while

I'm currently working on putting together a Spanish dictionary by sourcing the definitions from www.rae.es. However, there are a couple of challenges I'm facing: One issue is that the search engine does not function properly with acute accent ...

phpjavascripthtmlhyperlinkhtml-parsing

How can I apply a border to individual table cells in HTML without affecting the entire table?

Struggling to apply a border on table cells, especially when using rowspan. Desiring a table layout with 4 cells - one large cell on the left and three smaller cells on the right side of it. Below is the code snippet I attempted: jsfiddle[dot]net/1fv4dz ...

htmlcsshtml-table

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

htmlcssdirectory

What is the best way to display HTML content in a Jupyter Notebook?

While exploring my file system on a jupyter notebook server, I noticed that I can access and modify HTML and text files along with ipynb files. However, I am interested in viewing the files as rendered HTML rather than editable HTML. In simpler terms, is ...

pythonhtmljupyter

Newcomers to Visual Studio Code facing a problem with images not displaying

As a beginner in all aspects, I am currently facing an issue with displaying an image on Visual Studio Code. The problem arose when I tried to create a separate folder for the image, which resulted in a cascade of subfolders that only made things worse eac ...

htmlcssimagebootstrap-5

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

Similar Question: How do I halt a video using Javascript on Youtube? I am curious about how I can utilize the modal feature in Twitter Bootstrap to automatically play a Youtube video, and when a user clicks the "close" button, it will cease the video ...

javascripthtmlyoutubetwitter-bootstrap

Seeking out drag-and-drop capabilities using JQuery

My goal is to create a feature where users can drag and drop words from a list into input fields. I want the capability to do this multiple times with the same word, allowing it to be placed in different input fields. This functionality will essentially i ...

jqueryhtmlformsdrag-and-drop

Is there a way to give only the left corners of a button a rounded look?

Here is the visual representation of the button: https://i.stack.imgur.com/Bjlkp.png ...

htmlcss