Enclose a group of tiles in a shrinkwrap div

Question

Enclose a group of tiles in a shrinkwrap div

I've been struggling to make a div adjust to its content size here. I've attempted various methods to shrinkwrap it, but none seem to work.

<div class="outer">
    <div class="cont">
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
    </div>
</div>

Both

display: table;

and

display: inline-block;

have proven unsuccessful when applied to the inner div.

My goal is to have the inner div centered within the outer div, while keeping the contents of the inner div aligned to the left.

html css

Answer 1

Answer №1

I remember a similar question being asked some time ago. My suggestion was to utilize media queries to clear the floats and ensure that the table shrinks to fit its contents. You can refer to the original post here: Centering a variable width grid while aligning its elements to the left. Additionally, I created a fiddle to demonstrate this solution here: http://jsfiddle.net/5hWXw/.

Take a look at the jsfiddle example above;

Answer 2

I remember a similar question being asked some time ago. My suggestion was to utilize media queries to clear the floats and ensure that the table shrinks to fit its contents. You can refer to the original post here: Centering a variable width grid while aligning its elements to the left. Additionally, I created a fiddle to demonstrate this solution here: http://jsfiddle.net/5hWXw/.

Take a look at the jsfiddle example above;

Answer 3

Answer №2

It appears that your question may not be entirely clear, but based on my understanding, you are looking to have the inner div expand to fit the full content. Here is a helpful jsfiddle link for reference. I removed the display: table; property from the inner div.

Answer 4

It appears that your question may not be entirely clear, but based on my understanding, you are looking to have the inner div expand to fit the full content. Here is a helpful jsfiddle link for reference. I removed the display: table; property from the inner div.

Answer 5

Answer №3

To achieve the desired layout, ensure that the parent .outer div is set to display as a block element. The child .cont div should be centered by giving it a specific width and using margin: 0 auto. The value of zero in the margin property is not necessary, but the left and right margins must be set to auto.

For a practical demonstration, you can view this example on jsfiddle: http://jsfiddle.net/y7KJt/

I utilized the font-size: 0; declaration within your .cont class to eliminate any unwanted whitespace when dealing with inline-block elements like <img> tags.

Answer 6

To achieve the desired layout, ensure that the parent .outer div is set to display as a block element. The child .cont div should be centered by giving it a specific width and using margin: 0 auto. The value of zero in the margin property is not necessary, but the left and right margins must be set to auto.

For a practical demonstration, you can view this example on jsfiddle: http://jsfiddle.net/y7KJt/

I utilized the font-size: 0; declaration within your .cont class to eliminate any unwanted whitespace when dealing with inline-block elements like <img> tags.

Answer 7

Answer №4

It's a bit challenging to provide a precise answer to your query in this context, as I'm not entirely clear on what your ultimate goal is. When you mention wanting the inner div to be centered, it seems like you intend for the inner div to have a fixed width while the outer div spans 100% width, if I understand correctly.

Using display: table in this scenario is likely not the most suitable option. Typically, this property is utilized to ensure child elements have equal heights, automatic distribution, or vertical alignment capabilities (such as top, middle, or bottom).

If your objective is solely to center the inner div and assign it a fixed width, I'd suggest opting for the auto margin approach.

Specify a max-width for your inner div to establish a width limit, and apply left and right margins set to auto.

Does this align with your intended outcome? http://jsfiddle.net/ZnER7/1/

UPDATE

Based on your feedback, I believe I have a clearer understanding of your objective :-) However, if you're concerned about your inner div expanding when child nodes wrap, there may not be a straightforward solution.

In this demonstration: http://jsfiddle.net/ZnER7/3/

It demonstrates the utilization of inline-block elements as a workaround. By treating the inner div like text, you can center the inner container, with text-align: left aligning the images to the left. Nevertheless, when the inner container shrinks to accommodate wrapped child nodes, it continues to attempt maximum expansion. This behavior is likely a consequence of text overflow and could be unchangeable. Even when extensive words are incorporated, the outcome remains consistent.

Best regards, Gion

Answer 8

It's a bit challenging to provide a precise answer to your query in this context, as I'm not entirely clear on what your ultimate goal is. When you mention wanting the inner div to be centered, it seems like you intend for the inner div to have a fixed width while the outer div spans 100% width, if I understand correctly.

Using display: table in this scenario is likely not the most suitable option. Typically, this property is utilized to ensure child elements have equal heights, automatic distribution, or vertical alignment capabilities (such as top, middle, or bottom).

If your objective is solely to center the inner div and assign it a fixed width, I'd suggest opting for the auto margin approach.

Specify a max-width for your inner div to establish a width limit, and apply left and right margins set to auto.

Does this align with your intended outcome? http://jsfiddle.net/ZnER7/1/

UPDATE

Based on your feedback, I believe I have a clearer understanding of your objective :-) However, if you're concerned about your inner div expanding when child nodes wrap, there may not be a straightforward solution.

In this demonstration: http://jsfiddle.net/ZnER7/3/

It demonstrates the utilization of inline-block elements as a workaround. By treating the inner div like text, you can center the inner container, with text-align: left aligning the images to the left. Nevertheless, when the inner container shrinks to accommodate wrapped child nodes, it continues to attempt maximum expansion. This behavior is likely a consequence of text overflow and could be unchangeable. Even when extensive words are incorporated, the outcome remains consistent.

Best regards, Gion

Enclose a group of tiles in a shrinkwrap div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Personalize the material design datatable checkbox option

jQuery not displaying Div elements as expected

Mixing together an array of colors, experimenting with adding a touch of transparency

Top solution for maintaining smooth navigation across web pages

jQuery animation for expanding accordion headers

I aim to toggle the visibility of input fields upon clicking a button

Include new material in the upper-right corner of each row

"Enhance Your Design with Hovering CSS Backgrounds

Struggling with navigating segmented dropdown buttons

Overrides of variables are not always complete

Which is the superior choice: WebSocket-Node or ws? Additionally, is there a universally accepted interface for nodejs websockets available?

What are some alternative methods for downloading the latest file version without relying on the client cache?

What is preventing these elements from being contained within particular divs?

Pagination functionality in TablePress allows for improved organization and

How can you declare variables in CSS using LESS?

Get rid of empty spaces in gridstack js

GAE does not have access to background images

Utilize an array with dynamic referencing

Resize an image to automatically adjust and fit within a designated container

A pop-up window displaying an electron error message appears, but no errors are logged in the console