Modify the fluid containers on a webpage seamlessly without any gaps

I'm working on aligning multiple divs with dynamic content of varying height on my page.

Here's how the divs are currently designed:

I would like to achieve a design like this using CSS:

What modifications can be made to the CSS for the DIV to accomplish this?

htmlcssheight

Answer №1

If you're in need of a flex box CSS solution, look no further! Check out my example on jsfiddle: jsfiddle

.container {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
}

.container .column {
    max-width:200px;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
}

.column .dynamic-content {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-box-align: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
.container .dynamic-content {
    box-shadow: 1px 1px 2px 1px darkgrey;
    margin: 2px;
    background: lightcyan;
}

This is a pure CSS solution, no JavaScript required. Simply change the "dynamic-content" divs to adjust the column layouts accordingly.

Below is the HTML code from my jsfiddle:

<div class="container">
    <div class="column">
        <div class="dynamic-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Sample Sample</p>
            <p>Sample Sample</p>
        </div>
        <div class="dynamic-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </div>
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span>
            <p>Sample Sample</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...
        </div>
        <div class="dynamic-content">
            <p><span>Lorem ipsum dolor sit amet, consectetur...
        </div>
    </div>
</div>

Answer №2

To create a layout with equal height columns, you can use three div elements as columns and then insert the boxes into each column. Apply the existing margin-right to the column div's and set them to float: left;. Ensure that the boxes have a min-height property to allow them to expand based on their content. Here's an example:

<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>

If you want all columns to have the same height, you may need to utilize jQuery.

Answer №3

Expanding on Jonur's response, I crafted a layout with 3 columns featuring cells of varying heights. http://jsfiddle.net/z4Ygv/2/

The columns were specified and floated to the left. I initially set fixed heights for them in jsfiddle, but when implementing it on my own browser, I opted for heights of 100% to fill up the entire page.

.shortcell {
    height:30%;
    width:90%;
    background:#ff0000;
    margin: .25em .25em;
}
.column {
    width:30%;
    height:20em;
    float:left;
    border:1px solid black;
}
.longcell {
    height:45%;
    width:90%;
    background:#00ff00;
    border:1px solid black;
    margin: .5em .5em;
}

This approach is more straightforward...and interestingly, only the column to the left appeared as intended in marty's scenario on jsFiddle.

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 is causing the height:auto property to not function on these two elements?

I am facing an issue where the main-div and footer-div are not growing with the content as expected. While setting the height to auto works fine for the footer, it messes up the page for the main content. Specifically, the footer ends up taking over the en ...

csslayouthtml

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a triangle above a square: Step-by-step guide

https://i.sstatic.net/DdJ5oRz4.png I am attempting to design a square with a triangle resting on top. While I have made some progress, the code below is the closest I could get: .square { width: 20px; height: 20px; background: #FF0000; outline: ...

htmlcss

Is there a way to conceal or eliminate the search form from the webpage in Bootstrap 4 by simply clicking a button?

Is there a way to make the search form and Search Button disappear from the page, as they will be replaced by a Thank you message? <div class="row"> <div class="col"> <!-- ## SEARCH FORM ------------------- ...

javascripthtmlbootstrap-4

CSS grid-box experiencing issues due to interference from bootstrap styling

When attempting to create a grid, I noticed that the first image element is not showing up in the first position as expected. Instead, it appears in the second position, leaving the first spot blank. After inspecting the issue, I realized that the styles f ...

htmlcsstwitter-bootstrapbootstrap-4grid

Acquiring information using jQuery from a table

I'm currently working with a table that has the following structure: <table> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> </tr> ...

jqueryhtmldomjquery-selectors

CSS: The border line with a see-through section

I'm in the process of creating a div that has a unique design like this. https://i.sstatic.net/cHJNY.png .triangle-area { width: 100%; height: 150px; } .triangle1 { width: 100%; height: 50px; border-width: 50px 50px 0 50px; border-col ...

htmlcss

Creating unique URLs for websites can be accomplished by following these steps:

I am in the process of developing a website where content in the main div within the body section can be replaced. However, I have realized that all content will end up on the same URL. Any suggestions on how to fix this? HTML/PHP(index.php): <htm ...

javascriptphphtmlurlweb

Is it possible to achieve partial text stylization in Vue using Nuxt.js?

We're currently developing a Vue application Is there a way to style text partially, similar to this example? Although creating exact constraints from ellipses may not be possible, the functionality could still be achieved procedurally. ...

htmlcssvue.jswebnuxt.js

What is the best way to retrieve the $index variable from an ng-repeat loop within my JSTL code?

I am facing a challenge with a div block that utilizes an ng-repeat. In this Angular loop, I need to incorporate a JSTL loop as well, where I require the current index of the outer Angular loop. Here is a simplified version of the structure: <div ng-r ...

htmlangularjsjspjstlel

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

htmlcssflexbox

Tips for implementing fixed width on child divs within a fixed parent div

Feel free to check out the link above. The menu is designed to have a fixed position, so when you scroll down it will stay visible, which is exactly what I intended. You'll notice there are numerous menu items within the Fixed menuWrapper which span ...

htmlcss

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Having an issue with implementing a dropdown form in the navigation bar of my Rails application. The problem arises randomly - sometimes it works smoothly, while other times I have to refresh the page for it to function properly. The Rails version being u ...

javascriptjqueryhtmlruby-on-railsruby

Disable the activation of the <a> tag when clicking on a child video element, while keeping the video controls unaffected

I have a collection of photos and videos that are gathered from social media platforms using a hashtag search. Below is the structure of the HTML: <div class="media-holder"> <a href="--mediaURL here---"> <div class="description-bar>&l ...

jqueryhtmljquery-click-event

Unique background image that perfectly aligns with the dimensions of a single full screen

Does anyone know how this webpage achieves the effect of having a full-screen background that ends when scrolling down? I have noticed that the picture of the desert always covers my entire browser screen but is not a typical full-screen background as it ...

htmlcssbackgroundbackground-image

Embed an external webpage within your own and make full use of its content

Is there a way to embed an entire new URL or page within my website element so that users can interact with it without having to refresh the main page? It's okay if the new content initially loads with a page refresh. Would jQuery.load() work? Or pe ...

phpjqueryhtmlajax

Grouping results in MYSQL and PHP are essential to organizing and presenting

I am looking to organize the following database into various HTML tables grouped by Comp. SELECT GROUP_CONCAT(Comp) as Comp FROM database Group By Comp` Unfortunately, this did not work as expected. ...

phphtmlmysqlsql

Login block for Episerver

I'm brand new to episerver cms and I'm trying to add a "login block" to the top right corner of my home page where front-end users can log in. I've created a “LoginBlock”, ”LoginBlockController” along with a class called “LoginForm ...

c#asp.net-mvchtmlepiserver

Struggling to remove the CSS box surrounding the image

There is an issue with a blue box appearing around the twitter image on my website, www.isaveplus.com. This only seems to be happening in Internet Explorer, as other browsers do not show the box. I initially thought it was related to text-decoration, but t ...

htmlcss

Organize your items vertically using jQuery Mobile's list feature

I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...

jquerycssjquery-mobile