Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than that of a desktop. Furthermore, I want these items to be centered, even on a phone.

However, I am facing a challenge where I can't seem to make the parent div match the width of its children, let alone center it.

I have experimented with using display: inline-block, which does give dimensions to the div, but unfortunately, it ends up taking up 100% of the width.

For a visual representation of my issue, you can view an example here: http://jsfiddle.net/0jnjum30/1/

Has anyone encountered a similar situation before? Ideally, I would prefer to solve this problem using CSS only.

javascripthtmlcsse-commerce

Answer №1

This issue arises because inline elements do not have a set width by default. To address this, adjust the display property of your child elements to "inline-block" instead of the parent element. Once you specify a width for the parent element, you can then center it on the page.

.parent {
    margin: 0 auto;
    text-align: center;
    width: 300px;
    display: block;    
}

.child {
   display: inline-block;
   width: 100px;
}

If you make these changes in your code, you can see the updated results on this fiddle: http://jsfiddle.net/gez46x0b/1/ Adding an extra wrapper may be necessary to achieve a centered list with the last element aligned to the left.

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

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

I am encountering an issue with my web app that involves CORS operations when making $.getJSON AJAX calls. Typically, this functions properly on most client browsers due to the server having CORS enabled. However, I recently discovered that when using IE 1 ...

javascriptajax

Is it advisable to initiate an AJAX call and allow the browser to cancel the request if needed?

When an AJAX request is made, it typically appears in the network tab in Chrome. However, if a client-based redirect occurs at the same time, the AJAX request may be cancelled. But does this mean that the request still reaches the server and executes as ...

javascriptajaxjquerybrowser

Duplicate the canvas onto a new canvas

One of the functions I am using involves copying an old canvas to a new canvas. Here is the code snippet for this functionality: function cloneCanvas(oldCanvas) { //create a new canvas var newCanvas = document.createElement('canvas&a ...

javascriptjqueryhtmlcanvas

Deduce the generic types of conditional return based on object property

My goal is to determine the generic type of Model for each property. Currently, everything is displaying as unknown[] instead of the desired types outlined in the comments below. playground class Model<T> { x?: T } type ArgumentType<T> = T ...

javascripttypescripttypescript-generics

Node.js is causing issues with the functionality of Bootstrap carousel controls

I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...

htmlnode.jsbootstrap-4carouselejs

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

I am trying to trigger this function before the page finishes loading, but currently it only triggers after the page has loaded. Can anyone assist with this issue? $(window).on('load resize', function(){ var win = $(this); //this = window ...

javascriptjquery

Having trouble retrieving all img tags while scraping a website using BeautifulSoup (BS4)?

My goal is to collect a list of all the <img> image tags from a website. Unfortunately, I'm only able to retrieve a few and not the rest even though they are present in the HTML code when I inspect with developer tools. In my code snippet below, ...

pythonhtmlbeautifulsoup

How to add rows at a particular index within another row using ng-repeat

Check out this code snippet: <tr ng-repeat="param in tags[$index].parameters"> <td class="previewParamName">{{param.name}}</td> <td> <div ng-if="is_array(param)"> &l ...

javascriptangularjsangularjs-ng-repeat

What is the method for accessing the AG-Grid Grid API beyond the Vue component?

In my application, I have a component called Home and another one called AgGrid. The AgGrid component is displayed within the Home component, containing the actual AG-Grid. Here's how the Home component is structured: <template> <AgGrid :ro ...

javascriptvue.jsag-grid

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

After diving into AJAX and JavaScript, I find myself needing to replace some outdated Angular functionality on our Laravel site. The specific task at hand is creating a live search filter for a page with a static header search bar. The main requirement is ...

javascriptjqueryjsonajaxlaravel

Using different CSS classes interchangeably in AngularJS

Imagine you have a list with an unknown number of items, ranging from one to potentially dozens. You want to display five CSS classes in a regular alternating pattern. What would be the most effective approach to achieve this? Here is some sample HTML cod ...

javascriptcssangularjsng-class

Vue.js is displaying an error message stating that the data property is

I am struggling to access my data property within my Vue.js component. It seems like I might be overlooking something obvious. Below is a condensed version of my code. The file StoreFilter.vue serves as a wrapper for the library matfish2/vue-tables-2. &l ...

javascriptlaravelvue.jsvuejs2vue-component

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap

Remove an item from an array in JavaScript by specifying its value, with compatibility for IE8

Is there a way to remove an item from an array by its value rather than index, while ensuring compatibility with IE8? Any assistance would be greatly appreciated. Thank you. Below is the array in question: var myArray = ['one', 'two', ...

javascriptangularjs

Can you come up with a catchy one-liner for an array that contains all the elements of the arrays that came

I am currently working with the array [1,2,3,4,5,6,7,8,9] My goal is to achieve [ [1], [1,2], [1,2,3], [1,2,3,4], [1,2,3,4,5], ... ] I envision the desired outcome as const var = array.reduce **using some form of black magic** I ...

javascript

Creating a floating border effect.Would you like to know how

Currently working on a new component, I'm looking to create a unique border for certain cards. However, I'm struggling to find the perfect solution. Check out the specific border style needed in the image provided below. https://i.sstatic.net/4vA ...

csssassfrontend

What is the best way to eliminate the excess height in my <li> element?

I'm a little unsure about how to articulate my question, so I'm just going to share the code: body { background-color: #232026; background-image: url('galaxy16cropped.jpg'); background-position: center top; background-repeat: ...

csshover

What is preventing me from deleting cookies on Express?

Whenever a new user is registered, the number of cookies just keeps increasing endlessly. userRoutes.js: const { registerUser, loginUser, registerVerify } = require("./userController"); const express=require('express') const router=ex ...

javascriptnode.jsexpresscookies

toggle visibility of <li> elements using ng-repeat and conditional rendering

I have an array of color IDs and codes that I'm utilizing with ng-repeat in the <li> tag to showcase all colors. However, I only want to display colors where the color code is less than 10, hiding any colors where the color code exceeds 10. Addi ...

cssangularjs

"Enhance readability by adjusting the font size on mobile devices and iPhones for an

I'm currently working on a website that needs to maintain a consistent look across all types of devices, including laptops, PCs, iPads, iPhones, and other smartphones. To achieve this, I've implemented fittext.js, a pure JavaScript solution that ...

javascripthtmlcss