Unable to set div margin-top

Question

I tried the following html code (an example from w3schools site):

<!DOCTYPE html>
<html>
    <body>
        <div id="container" style="width:500px">
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
            </div>
            <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
                <b>Menu</b><br />
                HTML<br />
                CSS<br />
                JavaScript
            </div>
            <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
                Content goes here
            </div>
            <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
                Copyright © W3Schools.com
            </div>
        </div>
    </body>
</html>

And this is the output:

enter image description here

I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.

How can I solve this problem?

I wonder if the "clear:both;" is interfering with the margin behavior. — Costa Michailidis, Apr 18 '14 at 14:55
Please be very careful with W3Schools.com, it's notorious for it's bugs and bad practices (see [W3Fools](http://www.w3fools.com/)). The example uses inline styles for example which isn't the best way to learn HTML/CSS. — Ex-iT, Apr 18 '14 at 14:58
@Costa yes (see my comment to http://stackoverflow.com/a/23156644/1395740), but I can't understand how... — Nick, Apr 18 '14 at 15:04
Me neither, floats and clears confuse my brain. I use display: inline-block instead of floats as often as I can. The only challenge with it is whitespace, which I solve by stripping it out of my html files (using jade or any other template enigne). — Costa Michailidis, Apr 18 '14 at 16:59

score 1 · Answer 1 · edited May 23 '17 at 11:49

Another reason why floats suck as much as they rock.

You can add an empty div in between the footer and the content like...

 //content html
 <div style='clear:both;'></div>
 //footer html

http://jsfiddle.net/rK5zV/1/

Or you can make the footer a float also with a width of 100% like...

http://jsfiddle.net/7KZy9/

Other solutions can be found here...

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

score 0 · Answer 2 · answered Apr 18 '14 at 14:55

0

You can add to content margin-bottom:20px;

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">

answered Apr 18 '14 at 14:55

user2633669

285
3
10

Well, your solution works only if I maintain `clear:both` as `#footer` style attribute, can you explain why? And can you say why `margin-top` does not work? – Nick Apr 18 '14 at 15:02

score 0 · Answer 3 · answered Apr 18 '14 at 14:58

You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:

<body>

    <div id="container" style="width:500px">

        <div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
            </div>

            <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
                <b>Menu</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </div>

            <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
                Content goes here
            </div>
        </div>
        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            Copyright © W3Schools.com
        </div>
    </div>
</body>

Here is a jsFiddle that demonstrates the behavior.

score 0 · Answer 4 · answered Apr 18 '14 at 15:00

I gave your footer relative positioning and used the top attribute

Here is a working DEMO

<div id="container" style="width:500px">
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
            </div>
            <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
                <b>Menu</b><br />
                HTML<br />
                CSS<br />
                JavaScript
            </div>
            <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
                Content goes here
            </div>
            <div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
                Copyright © W3Schools.com
            </div>
        </div>

score 0 · Answer 5 · edited Apr 18 '14 at 16:29

0

Try making footer display: inline-block; width: 100%. It's not ideal, but it works.

edited Apr 18 '14 at 16:29

Joshua Dwire

5,415
5
29
50

answered Apr 18 '14 at 15:01

bowlerae

924
1
14
37

score 0 · Answer 6 · answered Apr 18 '14 at 16:45

0

After two blocks with styles float you should to use element with style cler:both; You code view like this

<div id="content">
  ...
</div>
<div style="clear:both;"></div>
<div id="footer">
  ...
</div>

answered Apr 18 '14 at 16:45

i.nata

11
1

Unable to set div margin-top

6 Answers6