The use of CSS float creates spaces between elements

Is there a way to stack the green DIVs on top of each other without any space between them in the given simple HTML code? I'm puzzled by the gap between the third and fourth green DIVs.

* {
  margin: 0;
}
.left {
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
  clear: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 99px;
  float: right;
  clear: right;
}
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>

htmlcss

Answer №1

When a div is floated, it cannot appear above another preceding floated element vertically, regardless of being floated to the opposite side. As a result, the fourth green div will not be positioned above the third blue div and will instead be pushed downward.

Answer №2

Make sure to include a clear div between 'left' and 'right' elements, not after every single div.

Solution 1

<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
<div class="left"></div>
<div class="right"></div>

CSS

* {
  margin: 0;
}
.left {
  display: block;
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 50px;
  float: right;
}

A neater solution

Solution 2

<div class="left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>
<div class="clr left"></div>
<div class="right"></div>

CSS:

* {
  margin: 0;
}
.left {
  display: block;
  width: 20%;
  background-color: #00CC66;
  height: 50px;
  float: left;
}
.right {
  width: 20%;
  background-color: #0033FF;
  height: 50px;
  float: right;
}

.clr{
  clear: both;
}

Answer №3

modify the following in a style tag: .left { width: 25%; background-color: #FF9900; height: 80px; float: right; clear:right;}

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

Is there a way to modify sections of an href link depending on the URL selector?

<a class="change_this" href="http://www.site1.com">Link 1 Type 1</a> <a class="change_this" href="http://MyID.site1.com">Link 1 Type 2</a> <a class="change_this" href="http://www.site2.com/?refid=myid2">Link 2 Type 1</a> ...

jqueryhtml

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in tru ...

htmlcsshtml-table

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

I am working on storing the scrollTop value of a vertical menu in my controller so that I can set it up each time I return to the page for persistent scrolling. Does anyone know how I can achieve this? This is the code snippet I am currently using: < ...

htmlcssangularjs

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Here is the structure of my HTML (at the top): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s ...

javascriptjqueryhtmlcssmobile

Controlling the Flow of Events in JavaScript Documents

Explore the integration of two interconnected Javascript files and delve into managing event propagation between them effectively. 1st js file var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var ...

javascriptjqueryhtml

What is the best method to activate or deactivate a link with jQuery?

Can you provide guidance on how to toggle the activation of an anchor element using jQuery? ...

jqueryhtmlanchor

Is there a way to prevent the window.status from appearing?

I currently have the following code snippet: <a class="button accessLink" id="loginLink" href="#" data-action="Login" data-dialog="access" data-disabled="false" data-entity="n/a" ...

javascriptjquerycsshtml

Endless looping of numerous consecutive animations

Is it possible to apply two animations to an element using only CSS and without the need for JavaScript? These animations should run sequentially an infinite number of times. @keyframes show { from, to { z-index: 100; } } @keyframes wait { ...

csscss-animations

Issue with the height of Bootstrap 4 navigation bar

After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the c ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

javascriptjqueryhtmlcsstwitter-bootstrap

Spring Boot - delivering unadulterated HTML and static materials

After spending countless hours working on this, I am still unable to figure out how to serve pure .html pages. The project I am referring to can be found at: https://github.com/robson021/Invoice-Writer Although the Thymeleaf engine works perfectly, I enco ...

javahtmlspringspring-mvcconfiguration

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

javascripthtml

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

csssass

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

javascriptjqueryhtmlcssweb

Comparing Embedded and Linked JS/CSS

In my experience, I understand the advantages of using linked CSS over embedded and inline styles for better maintainability and modularity. However, I have come across information suggesting that in certain mobile web development applications, it may be m ...

javascripthtmlcss

Seeking to duplicate script for a new table without making any changes to the original script

I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...

javascriptphphtmlfunction

JavaScript for Detecting Hits

I have recently ventured into coding as a beginner, and I have already created a calculator using Javascript, HTML, and CSS. Currently, I am working on developing a platformer game using JavaScript and HTML. I have set up the player, obstacles, canvas, fra ...

javascripthtmldebuggingcanvas

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

javascripthtmlcsssvghtml5-canvas

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

javascriptjquerycsscountercss-counter

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

javascriptjqueryhtmlreactjs