Create space adjacent to a div element with CSS styling

Looking to clear a section following a div with the class name "last." Is it possible to achieve this using only CSS? I am unable to directly edit the HTML.

Here is the current HTML code:

<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>

Here is the CSS being used:

.column{ width:250px; margin-right:10px; float:left;}
.column.last{ margin-right:0px;}

Any suggestions or solutions?

htmlcss

Answer №1

.column.last:after {
     visibility: hidden;
     display: block;
     font-size: 0px;
     content: " ";
     clear: both;
     height: 0px;
     line-height: 0px;
 }

Clearfix is the term used for this technique.

Answer №2

Utilize a div to clear the float. ;)

.section{ width:24%; margin-right:1%;float:left;background:grey;margin-bottom:20px;}
.section.last{ margin-right:0px;}
.cleaned {clear:both;}


<div class="section">1<br />2</div>
<div class="section">3</div>
<div class="section">4</div>
<div class="section last">5</div>

<div class="cleaned"></div>

<div class="section">6<br />7</div>
<div class="section">8</div>
<div class="section">9</div>
<div class="section last">10</div>

http://jsfiddle.net/vinicius5581/YMf2j/7

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

The background image in CSS refuses to display

My CSS background image isn't displaying properly. Here is the code snippet from my HTML: <div class="container-fluid p-c b-g"> <div class="row"> <div class="col-sm-12 text-infom"> </div> </div> </ ...

htmlcssbootstrap-4

Tick the checkbox to indicate that I want to insert an image in the adjacent column for the same row

Every time I click on the checkbox, an image should appear in the adjacent column for that specific row. Despite using the addClass() method and targeting the td, the image is appearing in all rows instead of just the selected one. Could somebody help me ...

javascriptjqueryhtmlcssangularjs

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

javascripthtmlcssdjangocodepen

div element's default input border displays in a distinct manner

When I create an input box without any styles (<input>) and then inspect the computed CSS in devtools, it shows a border of 2px inset rgb(238, 238, 238). However, if I create a div with the same border properties, it looks noticeably different: ...

htmlcss

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

htmlcssbootstrap-4

Is there a way to prevent my navbar from breaking buttons on mobile devices?

I am a beginner working on my practice portfolio and I have decided to make it fully responsive using flexbox as much as possible. I am following a "mobile-first" approach, so I can address any design issues for desktop later on. One problem I am facing is ...

htmlcss

Ways to incorporate an image into an SVG file

This SVG image that I have created presents a unique design. <svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <def> </def ...

htmlcsssvg

The input tag led to a twofold increase in output

I'm facing an issue with my output that I'd like to address. I need to halt a specific refresh loop in a particular field text tag, where my search text bar duplicates when a specific div is refreshed. I have implemented AJAX as a refresher in ...

phpjqueryhtmlajax

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a spec ...

htmlcssjquery-isotope

Issue encountered while attempting to transfer data via the $.ajax method

I created a poll form using radio buttons. To submit the form, I utilized $.ajax. However, when I tried using $("#polling").serialize() to gather the data, nothing was sent or requested... Could the issue be related to the radio buttons? $(function( ...

javascriptjqueryhtmlajax

What is the best way to incorporate right side padding into a horizontal scroll?

I'm attempting to include padding on the right side of a horizontal scroll so that the last item in the scroll appears in the center of the screen. Here's what I have tried so far. While the left padding works perfectly, I'm puzzled as to w ...

htmlcss

Modifying the CSS style of an element on PageA by clicking a button on PageB

For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html. .controller('TabCtrl', function($scope,Tabs) { $scope.t ...

cssangularjscontrollersbetween

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Guide on Configuring Print Page using Fresh HTML Codes with jQuery

Having an issue with printing a Bootstrap modal exactly as displayed? Check out this Print Problem Despite trying various solutions, none have solved my problem. Therefore, I am exploring a new approach. Does anyone know how to dynamically print new HTML ...

javascriptjqueryhtmlcsstwitter-bootstrap

The issue of excess space surrounding images while utilizing Bootstrap 3

Hey there, I'm currently working on a website using Bootstrap 3 framework and I've run into a little snag. Whenever I add an image (just a regular one with an img tag), it seems to have some white space on both the left and right sides of the scr ...

htmlcsstwitter-bootstrap

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

cssreactjsreact-nativestyled-components

Issue arises when combining inline-block and overflow-wrap for div elements

I am facing an issue with two divs that look good on the same line when utilizing display: inline-block. However, if one of the containers contains an excessively long word that I attempt to wrap using overflow-wrap and word-break, it causes the container ...

htmlcssoverflowinlineword-wrap

Ensuring that two elements in HTML/CSS always appear on the same line

Within my HTML code, I have implemented 2 tables using the PrimeFaces UI Framework for Java. Each table contains a button, and I am seeking a way to ensure that both buttons always appear on the same line. To achieve this alignment, I applied a style with ...

javascriptcsshtml-table

What are some ways to customize the appearance of VueJS components?

I am new to Vue, so I apologize if this question seems silly or if I have overlooked something. I believed that you could target a custom element like this: my-element { styles go here} However, when I created an element, it appears that I can only targe ...

cssvue.js