Why Top Margin of HTML Element Is Ignored After Floated Element

Why top margin of html element is ignored after floated element?

You've correctly identified the problem. The floated <div> is no longer used to calculate the top margin, and therefor the 2 <div>'s just butt against each other. A simple way to solve this is just to wrap the 2nd <div>. This will allow the wrapper to (invisibly) butt up against the first <div>, and allow you to specify white space for it.

The trick to getting the wrapper to work right is to have the white space be internal white space. In other words, the wrapper uses padding instead of margin. This means whatever is going on outside the wrapper (like other floating elements) won't really matter.

<div style="float: left; border: solid red 1px">foo</div><div class="wrapper" style="clear: both; padding-top: 90px;">    <div style="border: solid red 1px">This div should not touch the other div.</div></div>

Element margins ignored after floated element

Add margin-bottom: 16px to the "column" class.

Or add padding to the columns (obviously not if you're using borders on the column class).

Margin-top doesn't work after floated elements despite clear:both

check it over here may be you need the same
https://jsfiddle.net/chaitanyaah/yychtp8t/

   <div style='overflow:hidden'>
     <div style='float: left; width: 50%;background:#bbb'>content</div>
     <div style='float: right; width: 49%;background:#bbb'>content</div>
    <div style='clear: both; margin-top: 0px;border:2px solid #ddd'>content</div>
   </div>

Unexpected result from margin-top next to a floated element

You can make the main element to be inline-block and use calc to set the width. This shouldn't affect your layout a lot and you will get the correct output:

.main {
  width:calc(100% - 100px);
  display:inline-block;
  background: lightgreen;
}

Full code:

.wrapper {  background-color: #ccc;  clear: both;}.wrapper+.wrapper {  margin-top: 50px;}
.side,.main {  height: 100px;  padding: 10px;  box-sizing: border-box;  margin-top: 20px;}
.box {  padding: 10px;}
.top {  background: yellow;}
.side {  width: 100px;  float: left;  background: lightblue;}
.main {  width:calc(100% - 100px);  display:inline-block;  background: lightgreen;}

<div class="wrapper">  <div class="top"></div>  <div class="side">side</div>  <div class="main">main</div></div>
<div class="wrapper">  <div class="top">    <div class="box">top</div>  </div>  <div class="side">side</div>  <div class="main">main</div></div>

Margin is not working after using clear property in CSS?

Use of one container like this :

<div class="con" style="overflow: hidden">
    <div class="div1">This is suppose to be a first div</div>
</div>

.div1 {    border: 2px solid black;    float: left;}        .div2 {    border: 2px solid red;    width: 120px;    height: 120px;    margin-top: 100px;}

<div class="con" style="overflow: hidden">    <div class="div1">This is suppose to be a first div</div></div><div class="div2">Div2</div>

Why does this CSS margin-top style not work?

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

no line boxes, no clearance, no padding and no border separate them

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

Float either of your div elements

Make either of your div elements inline blocks

Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

Why Top Margin of HTML Element Is Ignored After Floated Element