Margin-Top Under a Floated Div CSS

margin-top under a floated div css

Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.

After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").

However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.

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>

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>

Float div doesn't respect margin-top

I moved div block with "Anagrafica di Sistema" to second place, that's what did you wanted?

1 div

 <div style="width: 40%; margin-left: 7%; margin-bottom: 5px; float: left;">
            <fieldset>
                <legend style="color: Navy">Anagrafica Utente</legend>...

2 div

<div style="width: 40%; margin-right: 7%; float:right;">
            <fieldset>
                <legend style="color: Navy">Anagrafica di Sistema</legend>...

3 div

<div style="width: 40%; margin-left: 7%;  float: left;">
            <fieldset>
                <legend style="color: Navy">Contatti</legend>...

4 div

<div style="width: 40%; margin-right: 7%; float: right;">
            <fieldset>
                <legend style="color: Navy">Operazioni</legend>...

http://jsfiddle.net/38sogsbu/

How do i set margins for floating divs?

set

 margin-right:200;

for .right

or you can use

position and left or right attribute for style like this

.left{
  position:relative;
  float:left;
  left:100px;
 }

DEMO

Ghost Top Body Margin With Floated Divs

The explanation:

There are a few things occurring here.

When elements are absolutely positioned or floated (as in your case), they are removed from the normal flow of the document. Here is relevant documentation confirming this:

9 Visual formatting model - 9.5 Floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

In your case, the children elements of the #header element are floated. Since all of the children elements are floated, the #header element essentially collapses upon it self since it doesn't have any dimensions.

Here is a visual example. As you can see, the parent, #header element, has a height of 0:

Since the element has a height of 0, the margin-bottom essentially acts as a margin-top, and the margin collapses with the body element.

I just answered a question about collapsing margins here, but here is the relevant documentation:

Box Model 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.

Possible solutions/workarounds:

As you noted, the problem is resolved my adding a clearfix to the #header element. The clearfix essentially prevents the parent element from collapsing upon itself, which means that the bottom margin do not collapse.

You could achieve the exact same thing by simply adding overflow: hidden to the element:

Example Here

#header {
  margin-bottom: 20px;
  overflow: hidden;
}

Why do CSS floats add margins to child elements?

By default there is some margin-top and margin-bottom set from the browser on h2 and p tags, and according to MDN - Mastering margin collapsing

The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).

...

If there is no border, padding ... The collapsed margin ends up outside the parent.

...

Margins of floating and absolutely positioned elements never collapse.

---

Related Topics