what causes the margin top to not show?

Question

why the margin-top: 20px; in footer doesn't work? what's the reason may be cause to this?

#main {
  margin: 0 auto;
  width: 960px;
}

#left {
  float: left;
  border: 1px solid red;
  width: 300px;
  margin-right: 10px;
  height: 500px;
}

#right {
  float: right;
  border: 1px solid green;
  width: 500px;
  height: 500px;
}

#footer {
  clear: both;
  margin-top: 20px;
  border: 1px solid lime;
  height: 200px;
}

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>

possible duplicate of [In css margin-top is not working with clear: both](http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both) — Nicole, Jul 09 '11 at 03:26
also a duplicate of [margin-top under a floated div css](http://stackoverflow.com/questions/3236060/margin-top-under-a-floated-div-css) — Nicole, Jul 09 '11 at 03:27

kazinix · Accepted Answer · 2011-07-09T03:53:53.303

Try to add some clearer:

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div style="clear:both"></div>
  <div id="footer"></div>
</div>

When an element's css clear set to both, it won't let ANY FLOATING element to overlap in its border and text area, meaning margin can be overlapped by float elements. That is why you cannot see your footer's margin. So we basically need an extra div, which is not floated, so the margin of your footer has something to push. Try my codes below (with BG and Borders), you'll see what I'm saying.

Without extra div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div id="footer" style="clear:both;margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

With extra div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div style="background:#0000FF;border:solid 1px #000000;clear:both">CLEARER</div>
  <div id="footer" style="margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

Resource:

http://www.w3.org/TR/CSS2/visuren.html#flow-control

mu is too short, why i add the clear:both to footer. it can't work. if i add a style float:left. the margin-top works. namely: #footer{clear:both; float:left;} — zhuanzhou, Jul 09 '11 at 03:26
@zhuanzhou: I just fixed up domanokz's formatting, the HTML and CSS are his but it was hidden because he forgot to indent his code. — mu is too short, Jul 09 '11 at 03:28

score 1 · Answer 2 · answered Jul 09 '11 at 03:24

1

Add a div to clear the floating items

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div class="clear"></div>
<div id="footer"></div>
</div>

and the css

.clear {
   clear: both;
}

since the left and right where floating, the space they occupied collapsed, so clearing the float brings back this space and the footer will appear right after it

answered Jul 09 '11 at 03:24

Ibu

42,752
13
76
103

why i add the clear:both to footer. the margin-top can't work. but if i add a style float:left to it. the margin-top works. namely: #footer{clear:both; float:left;} – – zhuanzhou Jul 09 '11 at 03:27
no you dont add clear both to the footer, especially if its floating, that is why i added an extra div – Ibu Jul 09 '11 at 03:29
Ya ok it does works, but whats the reason... What happens when we add this DIV class='clear'. Need to understand the principle so that we can apply it ourselves next time. – sushil bharwani Jul 09 '11 at 03:29
i explained it in the last paragraph of my answer – Ibu Jul 09 '11 at 03:31

score 0 · Answer 3 · answered Jul 07 '19 at 05:36

The solution is pretty good as from above solutions the text they write in page if selected then its visible to user so : HTML :

<section id="main">
        <div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
        </div>
    </section>
    <div class="temp">c</div>
    <footer>
        <p>Hello Copyright &copy; 2019</p>
    </footer>

CSS :

.box{
    float: left;
    width: 33%;

}

.temp{
    clear: both;
    margin-top: 20px;
    visibility: hidden;
}
footer p{
    clear: left;
    text-align: center;
    background-color: yellow;
}

what causes the margin top to not show?

3 Answers3