Image gallery floating

The image in the last position of this gallery is supposed to float left, but instead it appears centered. Can you spot the error in the code?

To view the complete CSS code, click here.

If you want to see the full HTML code, check it out here.

This is the snippet of HTML code causing the issue:

<div class="text-block7" >
<a href="gal/60.png" class="gal2" rel="gal"><img src="gal/thumb/60.png" alt=""></a>
</div>

Here's the relevant CSS:

#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
htmlcssgallery

Answer №1

Insert the following code before the 8th div block:

<div style="float:left"></div>

Answer №2

This issue arises because the 4th image is taller, causing the 7th image to collide with it when floating left.

To avoid this problem, you can implement a CSS rule that includes a clear:left on every 3n + 1 div like so:

div[class^="text-block"]:nth-child(3n + 1) {
   clear: left;
}

Keep in mind that the nth-child pseudo-class may not work on IE8. In such cases, you can use display: inline-block and vertical-align: top as alternatives to floating elements for better browser compatibility.

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 aligning text to the right side within a ListItem?

Currently, I have these elements where the "YoYo" text is aligned to the left by default. However, I am looking to adjust the positioning of some "YoYo" texts so that they can appear on the right side. I attempted to provide a style object with justifyCon ...

cssreactjsflexboxmaterial-ui

Safari does not support SVG fill pattern, unlike Firefox and Chrome

Having an issue with Safari 6.1.5 not displaying a pattern in an SVG rectangle. After simplifying the code, here is the test case: <html> <head> <style> .patterned { fill: url("#myid") none; stroke:blue} ...

htmlcsssvgsafari

Once the Angular project has been initialized, the Button disable attribute cannot be modified

In my Ionic-Angular project, I am creating registration pages where users input their information in multiple steps. For each step, there is a button that remains disabled until the correct information is entered. An issue arises when transitioning to the ...

javascripthtmlangulartypescriptionic-framework

Assorted dimensions of square grid

Is it feasible to achieve the following using only HTML and CSS? The condition is that since the divs are automatically generated in a list, they should not be nested within another HTML element (such as adding a div for each line is restricted): Here is ...

htmlcss

What is the best way to dynamically generate a consistent margin or padding between two sections on different screen sizes?

I have successfully stacked two sections on top of each other. To achieve this layout, I utilized position:relative on the parent container div and then employed position:absolute on the child divs to align them based on the parent container's top pos ...

htmlcssresponsive-design

Circular icons function as if they were squares

I'm currently working on designing a card using Bootstrap that includes some social media icons from Font Awesome. However, I've encountered an issue where all the icons are displaying as boxes with black outlines around them. Additionally, the h ...

htmlcssbootstrap-4font-awesome

The dropdown menu items spill out beyond the confines of the container

I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue. Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamb ...

htmlcsssassbulma

Tips for adjusting the size of your logo for the mobile edition of your WordPress site

I have been attempting to adjust the size of our website's logo ( ) for mobile viewing, but so far no code has proved effective. I've tested various iterations like the one below without success: @media (max-width: 360px) { .site-branding ...

jqueryhtmlcsswordpress

How to locate a div element using CSS selector in Selenium WebDriver with Ruby

My experience with CSS selectors in selenium webdriver has been positive, but I am facing difficulty in locating the element within the following div. <div class="class1 class2" dd:btnfloatingstyle="top-right" dd:entitytexttype="resultval" id="_78891a3 ...

htmlrubycss-selectorsselenium-webdriverweb-testing

Tips for organizing HTML logic in a separate document

I am faced with the task of displaying a list in HTML based on specific conditions: <!-- Display list if there are more than 5 results --> <div list.numberOfResults > 10"> <b>Name: </b>{{list.name}} <b>ID ...

javascripthtmlangulartypescript

Manage the element that should receive focus() after tab is pressed from an input field

On my webpage, there is a variety of elements such as inputs and anchors. I need to specify which input field the browser should move focus to when I press the tab key while on an input. Currently, pressing tab from one specific input takes me to a menu i ...

jquerycssknockout.js

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...

javascriptjquerycsshtml

When adjusting window size, the input shifts towards the left

Is there a way to prevent my input and login button from moving to the left when resizing the window? I am new to HTML and CSS and would appreciate any tips on keeping them in place. Below is my CSS code: #absolute { position: absolute; top: 411px; le ...

htmlcssresize

What is the best way to leverage environment variables in my CSS within the context of Next.js for defining the primary color scheme?

Is there a way to use an environment variable to specify the base color in my CSS? I am working with NEXTJS. All of my colors are defined as variables in my globals.css: @layer base { :root { ... --primary: #0096d0; --primary-bright: ...

cssnext.jscolorsenvironment-variablescss-variables

Not including traffic from IE 6/7

Is there a simple way to show a different page to users on IE6/7 when they visit a website? For example, can I redirect users from example.com to example.com/ie7? Unfortunately, IE7 is not compatible with the website I created, so I want to display a min ...

htmlcssinternet-explorer

svg contained within a resizable div

I am trying to insert an svg into the .container div that I created using this code snippet. The goal is to make the svg fit perfectly within the dimensions of the .container div, while also scaling proportionally with the page as it is resized: <html& ...

htmlcsssvg

Interacting with API using Ajax and jQuery

I am struggling to get my simple jQuery request to work correctly. I'm not sure what I'm doing wrong. Can you help me identify the error? http://jsfiddle.net/k6uJn/ Here is the code snippet: $(document).ready(function() { $.ajax({ type: "G ...

jqueryhtmlajaxjsonjsfiddle

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

phphtml

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Achieving Perfect Alignment in HTML Tables

I have created a simple HTML table and I am trying to center it vertically in the middle of the page based on the user's device height. So far, I have tried adding a div with 100% height and width, positioning the table at 50% from the top and left, b ...

htmlcss