Items that are floated can sometimes find themselves isolated at the end of a row

I have a simple float setup in place.

<div class="container clearfix">
   <div class="item">Some content</div>
</div>

Stylesheet snippet for items:

.item {
  float: left;
  width: 30%;
  margin: 1.5%;
  background-color: #fff;
  border: 1px solid #929292;
}

There are adsense ads mixed within, with their size confined by the .item element.

The issue: One item (supposed to be first on a row) is off to the right of the container alone, while the rest start a new row floated left as expected.

Although this question may have appeared before, my searches haven't yielded helpful results. Maybe I used the wrong keywords.

p.s. I've experimented with adjusting width and margin.

Answer №1

Could it be possible that your browser is rounding up your 1.5% to 2%, causing a total of 102%? This could potentially be the issue leading to the break.

Another suggestion would be to use paddings instead of margins and apply box-sizing: border-box;. By doing this, the padding will be included in the total width calculation.

After reviewing your live version, here is the solution:

The discrepancy in height between the item with the advertisement and the other items is what's causing them to look odd. You need to clear the floats on the first item following the advertisement or ensure that all items have the same height.

Answer №2

The issue at hand was that the blocks containing Adsense were lacking in height compared to other blocks. Although the width was restricted, the height was left unchecked. By establishing a fixed height, the problem was successfully resolved. It required some extra effort for smaller screen resolutions, but ultimately solved the problem hassle-free.

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

Struggling to figure out the ::before border trim issue

As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes: &::before { content: ""; position: absolute; bottom: 0; right: 0; ...

Make sure your website design is responsive by setting the body to the device's

https://i.sstatic.net/3xHcx.png I'm struggling to make the body of my page responsive for mobile users. Whenever I try using this line of code, it just creates a messy layout. Any advice on how to fix this? <meta name="viewport" cont ...

Increase the border thickness on the top side of the div

To enhance the design of the .menu div, I decided to include an additional border at the top. Initially, I incorporated top and bottom borders using box-shadow, followed by traditional borders using border-bottom, border-left, and border-right properties. ...

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

What is the best way to retrieve the data submitted in the Input field by using Ajax?

One feature I'm working on involves an input field within a form where users can update their name by clicking a button. The goal is to capture this change in the input field using Ajax and update it accordingly. Here's the HTML code snippet: & ...

Struggling with determining the perfect transition speed for the sidemenu display

I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I di ...

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

Adjust the position of an anchor tag when clicked with a fixed header

I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...

What are the steps for effectively utilizing the EmChart to achieve precise font sizes in ems?

Can you explain the intended use of this chart and instructions for how to utilize it? ...

Tips for avoiding duplicate usernames in mySQL when working with PHP

My users register for the database, but how can I prevent duplicate usernames in the database? I want to inform the user if their username already exists. <?php $error = ""; // error $GoodJob = ""; if(isset($_POST[&apos ...

Below are the steps to handle incorrect input after receiving only one letter:

H-I This is my input .centered-name { width: 80%; margin: auto; } .group { width: 100%; overflow: hidden; position: relative; } .label { position: absolute; top: 40px; color: #666666; font: 400 26px Roboto; cursor: text; transit ...

Using SVG icons within a twig template

Having trouble with svg icons and creating a menu that requires the use of several svg icons. It's known that to manipulate color with CSS, such as when an icon is active or on hover, the <svg> tag should be used instead of <img src="path-to- ...

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

Tips for achieving equal width li elements within various columns in Bootstrap 4 beta 2 and ensuring they span the full screen width

I've been scratching my head for a while, but I just can't seem to make it work. On the fiddle link provided, you'll notice three main blocks in light gray, each containing a variable number of smaller dark blocks. My goal is to have these s ...

Tips for incorporating only the CSS portion of tailwind into your project?

I am looking to exclusively utilize the CSS portion of Tailwind. An admin is writing an article and wants to incorporate all Tailwind classes within it. However, since Tailwind classes are generated during the React project build, there's a possibilit ...

Is it possible to assign a predetermined text content to a table cell using a CSS class?

I attempted the following: <style type="text/css"> td.orange : before { background: #DD5F15; content : "TRIPLE";} </style> However, it seems that the content is being added after the closing "td" tag, which is causing it not to display. E ...

Utilize Jquery to dynamically update form input in real time based on checkbox selections

I am working on a form that requires real-time calculation of GST (Goods and Services Tax) directly within the form (GST = Price/11) This functionality has been implemented with the following script. Additionally, the calculation needs to be adjust ...

Tabindex malfunction in Bootstrap dropdown menu when nested within a form and pressing Enter key

Within my form, I have integrated a Bootstrap 3 dropdown menu situated between two text input fields. The dropdown's role="menu" attribute allows for navigation using the up/down arrow and Enter keys. However, after making a selection in the dropdown ...