Issue with float and center CSS/XHTML divs in both horizontal and vertical directions

Having trouble with floating divs. Check out my website at:

I'm puzzled why some rows have 4 images while others only have one.

Take a look at the code snippet below:

#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
    float:left; display: table; text-align: center; position: relative;
    width:180px; height: 150px;
    margin:10px 0 30px 40px;
    vertical-align: middle; text-align: center;
}

div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item  {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto;  text-align: center; }
cssxhtmlcss-floatcentering

Answer №1

Give display:inline-block; a shot.

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }

Answer №2

To transform the presentation of div.image-item to inline-block, and then I will adjust it so that the image is positioned in the center of the div.

Answer №3

As you let floating elements like this, once they exceed one line, the following floating element will adjust its position to accommodate until it fits.

Take the 5th image for instance, it appears to be "stuck" at the bottom of the 3rd image instead of aligning all the way to the left edge because of the height difference with the 4th image.

However, in the case of the 10th image, this scenario doesn't occur as the 9th image is taller than those to its left. So, once the 10th image descends below the bottom of the 9th image, it clears the entire row.

If you replace the margin with padding and apply a border to .image-item, the concept mentioned becomes more evident.

To ensure the first item in each row shifts to the beginning of a new line, one can avoid using floats altogether, enclose every set of 4 items in a wrapping div, or utilize CSS3 properties to clear floats at the start of every row:

.image-item:nth-child(4n+1) { clear: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

What is the method for utilizing the data-etc attribute value of an element for CSS property values?

Is it possible to use multiple data attributes in a single CSS style? I have created the following CSS, trying to utilize both data-letters and data-color, but it is not working as expected. The data-color attribute should dictate the background color, w ...

htmlcss

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

htmlcsspollingblackboard

Maintain the previous droppable positioning after refreshing the page

I am encountering an issue with the .droppable event. I have set up two sections where I can move elements, but every time the page is refreshed, the positioning of the elements reverts to the initial position. How can I maintain the last positioning of th ...

javascriptjqueryhtmlcssdroppable

Why isn't the SASS extending button working on anchor tags in Bootstrap 4?

After noticing that I really like the style of the default buttons from pre-Bootstrap 4, I decided to try my hand at creating my own version using SASS code. Here's what I came up with: .btn-default { @extend .btn; border-color: #A5A5A5; } . ...

csssassbootstrap-4

Position an anchor image at the top left corner, no matter the DTD or browser

Is there a way to keep an image with an href fixed in the top left corner of a webpage without affecting any other content and ensuring it functions consistently across different browsers and DTDs? I am facing the challenge of needing to provide a code bl ...

htmlcss

Ways to incorporate horizontal scrolling into an HTML table

I am looking to incorporate a horizontal scroll feature into my HTML table. The table has a width of 100% and the first cell has a fixed width of 50px. There can be hundreds of columns in this table, so I want the first column with the fixed width to alw ...

htmlcss

I'm perplexed as to why my attempts to override a specific Bootstrap style with my own style sheet are proving unsuccessful

Currently, I am in the process of developing a basic website with the assistance of bootstrap and encountered an issue while trying to customize the appearance of an alert box. In my code structure, I have linked the Bootstrap CSS followed by the Bootstra ...

csstwitter-bootstrap

The Bulma dropdown menu fails to display its items

Currently, I am working with Bulma as my CSS framework. While trying to implement the hamburger menu, I encountered some difficulties. The documentation did not provide clear instructions on how the functionality should work. Despite observing the menu tra ...

cssvue.jsvuejs2vue-componentbulma

`<div>` element with a class of "button" that listens for

I've been attempting to use a userscript to automate a button click. Inspecting the element reveals the button code as: <div class="q-w-btn cl"></div> Unfortunately, the button lacks an id attribute, making it difficult for me to select ...

javascripthtmlcss

Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

My issue involves a multi-level drop-down menu that is solely constructed using CSS. The problem I am facing is that there is a delay of one second before the drop-down closes when the mouse is moved away. This delay causes multiple drop-down menus to stac ...

javascriptjqueryhtmlcssdropdown

How to Toggle Div Visibility with AngularJS ng-show and ng-click

In order to eliminate error messages, I decided to clear the field with a button click. This approach successfully removed the error in my initial test. <div class="errorPopup" data-ng-click="runner.Name = null" data-ng-show="mainForm.name.$error.pat ...

javascriptjqueryhtmlcssangularjs

mobile-friendly sticky footer

Currently working on a website project utilizing Bootstrap 3 (http://www.patrickmanser.ch/fnws) and I am trying to implement a sticky footer. After adapting the code snippets from Bootstrap 3 examples according to my specifications, everything seems to fun ...

htmlcsstwitter-bootstrap

Utilize fancybox to target and display related content through external links within tabs

My website features a stylish box with tabbed inline content, allowing users to navigate between different views by clicking on tab names. However, I want the tabbed content to be accessible when a user clicks on a navigation link to launch the box. For ex ...

javascriptjquerycssfancybox-2

I seem to be struggling with hiding/showing a div element. Can you figure

I am in the process of creating a gallery that will display a div with images when a button is clicked. The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in ...

javascripthtmlcss

Why isn't my HTML reflecting the CSS changes I've made?

My CSS code is not applying to the HTML in general, only to h1 and h3. I have used similar looking code before and it worked fine. html { text-align:center; border:25px dotted #ff5c33; background-color:#00b300; color:#ff5c33; font-fami ...

css

Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...

twitter-bootstrapcssbootstrap-4css-transitions

Using CSS and jQuery to create dynamic image animations

I've implemented social buttons that change the image on hover and it's working perfectly. Check out the Fiddle here <a href="#"> <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/> </a> This is my C ...

jquerycssanimationcss-transitions

Customizing Bootstrap Style for the 'btn-xs' Size Using a New CSS Class

Hey there, I'm diving into Bootstrap for the first time and I'm looking to tweak the 'btn-xs' class to adjust the height, width, and padding. I want to make the button smaller and reduce the text size as well. I attempted to create a n ...

htmlcsstwitter-bootstrapodoo-8

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap

Using JQuery to update text by sliding in the new one and pushing down the old text

I am experimenting with JQuery to create a unique effect where new text pushes the old text down and causes it to vanish. Essentially, it is a stylish text replacement: the new text displaces the old text while making it disappear. Someone has developed s ...

javascriptjqueryhtmlcss