Creating CSS wrappers around div elements of varying sizes

Question

Creating CSS wrappers around div elements of varying sizes

I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below:

<div id = "div1"></div>
<div id = "div2"></div>
<div id = "bigdiv1"></div>
<div id = "div3"></div>
<div id = "div4"></div>
<div id = "div5"></div>
<div id = "div6"></div>
<div id = "div7"></div>
<div id = "div8"></div>
<div id = "div9"></div>
<div id = "div10"></div>

My goal is to achieve a layout that resembles this: . However, I want it to look more like this: . Simply using float left and right does not give me the desired result as I need multiple big divs to float with small divs in between without white spaces.

If anyone has a solution using Javascript and JQuery, that would be greatly appreciated. So far, I haven't found a satisfactory solution to achieve the layout I envision, and I'm hopeful that someone here can help me achieve my goal.

css html css-float

Answer 1

Answer №1

If you're looking to achieve this, here are a couple of methods you can consider:

Utilizing CSS3 columns (though there is limited browser support). Take a look at Someone else's jsFiddle example

.parent-div{
   -moz-column-width: 13em;
   -webkit-column-width: 13em;
   -moz-column-gap: 1em;
   -webkit-column-gap: 1em;
}

Another option is using the masonry library

$('.parent-div').masonry({
   // options
   columnWidth: 200,
  itemSelector: '.item'
});

You could also modify your HTML structure to incorporate column divs

<div class="two-columns">
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
</div>

In my opinion, I suggest utilizing the masonry jQuery plugin for wider compatibility. Alternatively, you can opt for CSS3 columns if your target audience consists of modern browsers only (ie10 and above)

Answer 2

If you're looking to achieve this, here are a couple of methods you can consider:

Utilizing CSS3 columns (though there is limited browser support). Take a look at Someone else's jsFiddle example

.parent-div{
   -moz-column-width: 13em;
   -webkit-column-width: 13em;
   -moz-column-gap: 1em;
   -webkit-column-gap: 1em;
}

Another option is using the masonry library

$('.parent-div').masonry({
   // options
   columnWidth: 200,
  itemSelector: '.item'
});

You could also modify your HTML structure to incorporate column divs

<div class="two-columns">
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
</div>

In my opinion, I suggest utilizing the masonry jQuery plugin for wider compatibility. Alternatively, you can opt for CSS3 columns if your target audience consists of modern browsers only (ie10 and above)

Creating CSS wrappers around div elements of varying sizes

Answer №1

Similar questions

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

Modify the conditions of a CSS file in Bootstrap using JavaScript

A guide on creating a clickable polygon in Vue.js using Konva

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Placing the date of each blog post at the end of the excerpt

What strategies does Wired magazine use to create their unique thick underline link style?

Creating a custom video to use as the favicon for my website

Creating PNG images in a scripting language for web applications

Creating space between flex items in Slick Carousel with Vue

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

Is it possible to use the same identifier for both the name and id attributes in HTML?

What are the signs that an element was visible on screen prior to navigation?

Persistent pseudo-element problem across all iterations of Internet Explorer

The ul element does not encompass all child elements in terms of size

Include a custom HTML element on a webpage using Python's Selenium module

Is it possible to show the Display Center within the dropdown menu?

Utilize API or alternative methods for analyzing Instagram data

The issue of multiple columns not displaying correctly when set to a height of 100

Slower CSS rendering as Javascript finishes its tasks