What could be causing the margin property to fail in "container3" even after implementing the clear property in CSS?

Within the main container, you will find three smaller containers as shown in the attached file. The first two containers are styled with "float: left", while the third container has the "clear: both" property applied to it.

However, it appears that when the "clear" property is added to the third container, the margin-top feature stops working.

I have a couple of questions that I hope you can help me with:

  1. Why is this occurrence happening?
  2. What steps can I take to resolve this issue?

Thank you for your assistance!

Code:

    div#insideContainer1
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      float:            left;
}

div#insideContainer2
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      margin-left:      20px;
      float:            left;
}

div#insideContainer3
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      margin-top:       30px;
      clear:            both;
}

View CSS Output Screenshot

View CSS Code Screenshot

htmlcsscss-float

Answer №1

Alright then,
1- When you apply clear: both; to a div, it clears any content beside it on the left and right. Therefore, in this case, clear on div#3 is redundant...
(for example: if you give both div#1 and div#2 clear: both;, each div will be on its own line, disrupting the float: left; alignment.

2- To break the float here, there is no need for clear" both; on any of these divs. Instead, a separate div itself should be used to clear and separate!

3- Since all the divs have the same CSS style, they can be selected at once (learn more: CSS Selector Reference).

HTML:

<div class="container">
    <div class="div1"></div> 
    <div class="div2"></div>
    <div class="clear-both"></div> 
    <div class="div3"></div>
</div>

CSS:

.div1,
.div2,
.div3{
    width: 500px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f40b0b;
    margin: 10px;
}

.div1, .div2 {
    float: left;
}

.div3 {
    background-color: aqua;
}

.clear-both {
    clear: both;
}

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

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...

javascripthtmlcss

Using local storage with github sites can lead to some unexpected and peculiar behavior

Currently, I am working on a simple clicker game using HTML and JavaScript. To store the variables money and taxCollecters, I have implemented local storage. However, I am encountering strange issues when trying to use the save and load buttons on the Gi ...

javascripthtml

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

In a different discussion, it was mentioned that the method used to create a CSS triangle allows for triggering the hover state or click event only when the cursor is inside the triangle. There is a demo provided to demonstrate this with the hover state. ...

javascripthtmlcss

Obtain the breakpoint value from Bootstrap 5

We have recently updated our project from Bootstrap 4 to Bootstrap 5. I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with: window .getComputedStyle(document.documentElement) .g ...

javascriptcssbootstrap-4bootstrap-5

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Adjusting the size of menus and text on the screen

A while back, I enlisted the services of a web developer to create my website, but unfortunately, it was never properly optimized for resizing windows. Despite numerous attempts to contact him for fixes over the past 5 months, he claims to be too busy at t ...

htmlcss

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

evaluating each element in a list against another

I'm attempting to check if an element exists in another list, but the lists are not in order and they are of different sizes. let list1 = [10 , 4 , 5] let list2 = [4 , 5] I attempted a solution, however it only works when the elements are in the same ...

javascripthtml

Registering a change event for a table's value

I am a beginner in Angular and struggling with writing an event that can successfully pass the changed value from a table cell to my component. Below is the HTML code for the table cell, where the user should be able to change the value and have it passed ...

javascripthtmlangular

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

javascripthtmlangularjsjson

Spotlight a newly generated element produced by the*ngFor directive within Angular 2

In my application, I have a collection of words that are displayed or hidden using *ngFor based on their 'hidden' property. You can view the example on Plunker. The issue arises when the word list becomes extensive, making it challenging to ide ...

cssangulartypescriptngfor

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

javascriptjqueryhtml.netajax

Add the information from the form to a JSON document

I am trying to add form data to a json file using the code below. However, I keep getting an error response whenever I submit the data via post. Can you help me identify where the issue lies? HTML <form class="ajax form-inline"> <div class="form ...

phpjqueryhtml

Is there a way to log and process div data posted using jQuery in CSS format?

I am looking to extract and log a JavaScript-calculated result from an anonymous survey created using a WordPress plugin. The generated HTML code is: <div ref="fieldname57_1" class="cff-summary-item"> <span class="summary-field-title cff-summary ...

jquerycss

How can ReactJS conceal text when it wraps to the next line?

I am currently developing a web application that is compatible with both small and large screens. I am facing an issue where when the browser window is resized to be smaller, a title such as "Stackoverflow helps a lot" ends up breaking into the next line. ...

javascripthtmlcssreactjs

What are the steps to produce a high-quality WebP image without losing any data?

I recently started experimenting with the WebP image format in Chrome by utilizing the canvas element. After researching on MDN, I discovered that the toDataURL function has a second parameter that determines the quality of the resulting image. My goal is ...

javascripthtmlgoogle-chromecanvaswebp

Today, I am experimenting with HTML5 File Upload using Capybara and Selenium Webdriver in Ruby

I have encountered a problem with a simple modal that allows users to upload a file using a browse button. Due to some unknown issue, possibly related to the fact that it is an HTML5 file input and the browser adds its own functions to it, testing this has ...

ruby-on-railsrubyhtmlselenium-webdrivercapybara

Using PHP to output a string within a JavaScript onclick function parameter

I am attempting to display a string in PHP as a string variable within a JavaScript function, but it is not appearing correctly. How can I resolve this issue? <?php $example1 = "example 1"; $example2 = "example 2"; $examp ...

javascriptphphtmlstringecho

Is there a way to set the menu to automatically open when the page loads?

Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...

javascripthtmlcss

Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle tr:nth-child(odd) td { background-color:red; } tr:nth-child(even) td { background-color:blue; } tr th { background-color: yellow} ...

htmlcss