Floating images using clearfix technique

I'm having trouble explaining the issue, so please check out the link.

On this (A), the white background looks great, but when I add

<!-- Problem here -->
<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->

The page then switches to (B), and the white background disappears.

Any advice on how to fix this issue?

css

Answer №1

All the thumbnails are 'floated' which means they do not take up page space due to the CSS property 'float'. To resolve this issue, you can use a CSS 'clearfix' after all the thumbnails.

A quick fix for this is to add:

<br style="clear: both;" />

After all your thumbnails.

Another solution could be:

.spacer
{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

Then insert:

<div class="spacer"></div>

These days, developers are using innovative techniques like:

Answer №2

simply include

<div style="clear: both;">&nbsp;</div>

following the </ul>

The issue you are encountering is related to the floated image elements in your design. CSS may struggle with determining the height of a div that includes floated elements.

Answer №3

Replace your existing code with the following codes for guaranteed success

<style type="text/css">
   .clearfix {
      clear:both;
    }
</style>

<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>

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

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

I'm new to JavaScript and I want to create a rock, paper, scissors game from scratch. My Game Plan: Once the user clicks on an option (rock, paper, scissors), the game will display their score and the computer's score along with the result of t ...

javascriptjqueryhtmlcss

Inline-block display causing divs to act unpredictably

I am working with a main div that contains three smaller divs inside. Each of these divs has been assigned a width of 30%, and they are all perfectly centered within the main div. To ensure that the three divs appear side by side, I used the display: inli ...

csshtml

I am having trouble with Django Bootstrap when trying to center this container

I've been struggling to center this div container following my navbar in order to achieve equal spacing on both sides of the page. Unfortunately, my attempts have been unsuccessful. Could anyone provide assistance, please? The issue seems to be occurr ...

pythonhtmlcssdjangobootstrap-4

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

Styling the input element in a form with a CSS border outline

Is there a way to display an outline around an input element when a user navigates sequentially (TAB button) and then hide the outline when the user clicks on the input element with the mouse? Has anyone successfully implemented this type of behavior befor ...

javascripthtmlcss

Design for a pop-up window displaying fields for entering both a username and

Currently, I am developing a mobile app using Ionic and I am in need of a popup window to collect two pieces of data - a username and a password. After researching several websites, I was unable to find a solution that addressed collecting two pieces of ...

javascriptangularjscssjquery-mobileionic-framework

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

javascripthtmlcssbootstrap-4bootstrap-modal

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

The Art of Personalizing a Banner

I am currently experiencing an issue with the width of a specific gadget. My goal is to have the border-bottom line of #customheader span the entire width of any screen size. However, at the moment, the border-bottom is only the width of the blog itself. H ...

htmlcssblogger

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

javascripthtmlcss

Floating elements changing positions as the user scrolls

Have you ever wondered how websites like Facebook manage to float certain elements, such as a menu bar or social plugin, when the user scrolls past a specific point? This functionality can be achieved through JavaScript (jQuery) events that trigger when a ...

javascriptjquerycssplugins

Discovering the following div

<button class="volumen-btn" onclick="niceFunction()> <i class="fa fa-volume-up"></i> </button> <div class="volume-control-container" id="container1" style="display:none;"> <input type="range" name="blabla" class="volume-ran ...

javascriptjquerycsshtml

The image is taking up the entire div instead of just filling the area below the header

I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container. Below is the code snippet I'm work ...

htmlcss

Shifting the dropdown arrow to a different position within the navbar

In the R shiny application I am working on, I have a navbar with a dropdown arrow that I want to move inline instead of below the menu. https://i.sstatic.net/e6BZG.jpg Could this be related to the navbar toggle? https://i.sstatic.net/e7I87.jpg ...

cssrshinybootstrap-4

How can we display a tool tip when hovering over the matoptions depending on a specific condition?

<mat-select class="dropBox" placeholder="Select One" (selectionChange)="mymethod($event.value)" style="background-color:#FFFFFF;"> <mat-option *ngFor="let option of myList" [val ...

htmlcssangular

Issues with toggling the Bootstrap 4 Navbar in ASP.NET

I have built a website using Bootstrap 4 in ASP.NET (.NET Framework). However, I am facing an issue when switching the website view from PC to mobile. The navbar-toggler-icon button is not working properly as the navbar content does not show up when I pres ...

htmlcssasp.netbootstrap-4

In Angular/CSS, setting the height of all parent elements to 100% does not necessarily ensure that the child element

I have a page where I've set all parent elements to a height of 100%, including the root of the app. However, when I reach a component in the body, it seems to be ignoring the height settings. Even though my dev tools show that the direct parent of ". ...

cssangular

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui