Wrapping multiple floating divs with varying dimensions inside a parent div using shrinkwrap technique

To ensure that divs of varying numbers, widths, and heights have matching heights, I am implementing a jQuery script that requires them to float. However, I prefer for them to be centered, so I am utilizing the relative position trick for centering.

CSS

div#cardwrap {
border:3px purple solid;
float:left;
position: relative;
left:50%;
}

div#centermaster {
text-align:center;
border:1px yellow solid;
float:left;
position: relative;
left:-50%;
}

div.cardtable {
float:left;
padding:35px;
border:1px green solid;
}

HTML

<div id=cardwrap>
    <div id=centermaster>
        <div class=cardtable>Images</div> (variable number)
        ...
    </div>
</div>

Everything seems to work well initially, but I am having trouble with the wrapper not shrinkwrapping correctly. As the images load, the green divs wrap to the next line as intended, causing a gap on the right side which disrupts the centering effect of the yellow div. How can I ensure that the yellow div matches the width of all green divs in a row?

If there are any other methods to equalize div heights while centering them, I am open to suggestions. Additionally, scripts to equalize widths of specific div classes based on varying content would also be helpful. Ultimately, my goal is to center the green divs in a table-like layout that accommodates different screen sizes and content.

Answer №1

Uncertain about your needs, but perhaps inline-blocks are what you're looking for in this situation. Here is an example: http://jsfiddle.net/TSpXZ/

To ensure compatibility with IE, include the following code within Conditional Comments:

div.cardtable {
    display:inline;
    zoom:1;
}

Feel free to explore more with inline-blocks — they offer great versatility!

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

Dragging and dropping elements on the HTML Canvas with the added feature of snap functionality

I have implemented a drag-and-drop circle feature inside an HTML canvas with the following code: var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); width = c.width = window.innerWidth * 0.9; height = c.height ...

What is the best way to display database information on my webpage according to the selected item in the combo box?

Whenever I visit my sample.php page, the only thing that appears is my combo box. However, when I start selecting a value from the combo box, that's when the data from my database, which is fetched from getyear.php, is displayed. What I want to achie ...

Spread out the CSS grid dimensions to the descendants for the vuetify v-card image

I'm facing an issue with arranging vuetify cards with images in a CSS grid. The problem is that the grid size is not being recognized by the v-card's v-img because it's a grandchild element. How can I pass down the grid size to the v-img? M ...

Looking for assistance with a CSS selector in jQuery

I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript. jQuery(document).ready(function(){ jQ ...

Addressing the issue of compatibility with iPhone 5 and 5S in both portrait and landscape modes

I made an attempt to conceal certain elements specifically on iPhone 5 & 5S in both portrait and landscape orientations, but unfortunately, it ended up affecting all iPhone devices. Below is the code snippet used: @media only screen and (min-device ...

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

Issue with sliding panel not working smoothly in Internet Explorer

Is there a way to remove the added margin when opening the info slide panel? The issue seems to only occur in IE (using the IE tab plugin for Firefox) and in IE7 and IE8, the tooltip does not display. Thank you for any assistance. Site Link ...

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Having trouble with the FireFox/IE9 driver in Selenium? When using the Actions class and its moveToElement method, I keep encountering a MoveTargetOutOfBoundsException error. Despite trying different solutions like Coordinates, Point, and javascriptexecuto ...

Styling Overlapping Divs with CSS3

I am attempting to replicate this particular effect using HTML within the UIWebView control on iOS. The desired outcome is to simulate a progress bar on the listing. My current approach involved utilizing this method, however, as you can observe, adding pa ...

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Hello, I am new to website development and I would like to create a jquery based photo gallery for my personal website. One feature that really catches my eye is this one (for example): The gallery has a large thumbnail grid where you can click on a thumb ...

Having trouble with loading images in Bootstrap 5 framework

I am currently developing a website using HTML in Visual Studio Code with Bootstrap 5. However, I am facing an issue where the images I have inserted into a new section are not loading, while the ones in previous sections are displaying perfectly fine. < ...

Activating hardware acceleration: utilizing translate3d

In a recent discussion by David Walsh, he mentions the potential for hardware acceleration through the use of the translate3d property in CSS. Here's how it operates: .animClass { -webkit-transform: translate3d(0, 0, 0); -webkit-backface-vis ...

What is the best method for implementing border-radius on select2 elements?

I previously had a default bootstrap user select box with a border-radius style applied: <div class="container"> <select class="form-control" style="border-radius: 1rem;"> <option value="1">Us ...

Transmitting HTML markup code

Let's discuss an example with a form that may not be secure or correct: <BODY> <FORM ACTION="" METHOD="post" NAME="test" ID="test"> <INPUT TYPE="text" NAME="testt" VALUE="1"> <INPUT TYPE="reset" VALUE="testtt" onClick="test.s ...

Creating a circular text element with text both in the center and around the edges using CSS

I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...

What is the maximum size allowed for a background image in CSS?

Within a 70 by 50 px box, I have various SVG images with different aspect ratios - some portrait and others landscape. Setting background-size: 70px auto; works for landscape images but distorts the portraits by stretching them vertically. Is there a way t ...

Utilize jQuery to apply a CSS class to the element that is clicked and inject additional content into a designated div

Here is a link to a page where I am experimenting with creating an interactive choose-your-own-adventure story: My goal is to add the class "disabled" to the element when a user clicks on the word "stairs" and then continue the story. Below is the relevan ...

Tips for displaying information in an Autosearch feature

I am trying to implement an auto search feature using AJAX calls, but I am facing difficulties in displaying the results on the search bar. The search results are showing up properly elsewhere. <input type="text" id="select_link" placeholder="enter th ...

What is the best way to incorporate a solid element onto a see-through background?

I have a link at "http://hastebin.com/julayefoto.xml" and I need assistance in making the content inside the bubble named "Test Test Test" non-transparent while keeping the bubble itself transparent. Any help would be greatly appreciated. Thank you :) ...