Enclosing floated elements within a parent div

Question

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent?

I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the child elements move to the next line as there's excess space on the right side. My goal is to have the parent wrap tightly around its children.

You can check out a demo I created here: http://jsfiddle.net/UMgct/4/

#parent currently displays the undesired behavior, while #parent2 and #parent3 demonstrate what I want to achieve without explicitly setting the width. I understand why #parent behaves the way it does, but I can't figure out how to achieve my desired result.

If you have any suggestions or ideas, I would greatly appreciate it!

html css

Answer 1

Answer №1

To start, it's recommended to convert 'parent' and 'child' into classes rather than IDs. Classes can be reused multiple times, while IDs should be unique identifiers.

Assuming the change from IDs to classes has been made, you can use JQuery to achieve your desired outcome:

$(document).ready(function() {
    var numPerLine = parseInt($(window).width() / $('.parent > .child').outerWidth(true));
    $('.parent').width($('.parent > .child').outerWidth(true) * numPerLine);
});

Answer 2

To start, it's recommended to convert 'parent' and 'child' into classes rather than IDs. Classes can be reused multiple times, while IDs should be unique identifiers.

Assuming the change from IDs to classes has been made, you can use JQuery to achieve your desired outcome:

$(document).ready(function() {
    var numPerLine = parseInt($(window).width() / $('.parent > .child').outerWidth(true));
    $('.parent').width($('.parent > .child').outerWidth(true) * numPerLine);
});

Enclosing floated elements within a parent div

Answer №1

Similar questions

Arranging HTML Lists in Perfect Order

Pressing the button in the navigation bar results in an expansion of the navbar

Enhancing PHP Markdown to Support Custom CSS Classes

Automatically, the "ng-hide" class gets added despite using the correct syntax for ng-show

Struggling with combining CSS stylesheets?

Different syntax issues in Firefox and Internet Explorer are causing errors

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

The button in my form, created using React, continuously causes the page to refresh

Mastering the art of combining images and text harmoniously

Invoke a specific URL during an HTML5 upload

Tap to navigate to queued sections on click

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

Jquery enables smooth image transitions when changing classes

Tips for dynamically including classes in NextJS component with class names from CMS?

Notes should be added to the Flutter page when it is executed on the emulator

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

What is the best way to trigger click events within a select dropdown using Angular?

Is it Possible to Stack Multiple Rows of Images with HTML5/CSS3?

Make sure to load the <img> html tag before implementing js masonry for optimal

Only add table heading if there is available space, but refrain from doing so if it will disrupt the layout