How to use margin-bottom to create length of the web page

Question

Here is my code:

<html>
    <head></head>
    <body>
        <div style="width:300px;height:3000px;position:absolute;top:0;left:0;margin-bottom:1000px;background-color:#00f;">
        </div>
    </body>
</html>

The idea is to have a 3000 px high block and then a 1000 px space. But the space is ignored when I test the code in Safari. Works fine in Chrome though. Not sure in IE. What should I do?

Space is not ignored in [my test](http://jsfiddle.net/td8cjq00/). — Robby Cornelissen, Aug 16 '14 at 07:57
I don't see anything wrong with it http://jsfiddle.net/vjgezbxb/1/ — Richa, Aug 16 '14 at 07:58
I think he want 1000px white space under the blue box, `margin-bottom:1000px` — Gerret, Aug 16 '14 at 07:59
@Gerret Check both fiddles above. The space is under the blue box. — Robby Cornelissen, Aug 16 '14 at 08:00
@RobbyCornelissen it is not working for me I just see the blue box and no space... So it could be the browser? I am using firefox — Gerret, Aug 16 '14 at 08:01
I just checked the code with other browsers. You guys are right. Works in Chrome. But it doesn't work in Safari. I use OS X 10.10 beta. Changed the question. Sorry! — leoliang, Aug 16 '14 at 08:02
@Gerret Seems indeed to be browser-dependent. Post was updated as well. Using Chromium here. — Robby Cornelissen, Aug 16 '14 at 08:02

score 0 · Answer 1 · answered Aug 16 '14 at 08:14

Yeah it works, like Robby and Richa have already commented.

But if you want to visally see the "space" try this code (within the body tag of course)

<div style=" width:300px; height:3000px; position:absolute; 
 top:0px; left:0; margin-bottom:1000px; background-color:#00f; ">
</div>
<div style=" width:300px; height:3000px; position:absolute; 
 top:4000px; left:0; margin-bottom:1000px; background-color:#00f; ">
</div>

score 0 · Answer 2 · edited Aug 16 '14 at 11:49

0

I think you wanted space at the bottom of the div. Try this code below:

<div style="width:300px; height:3000px; position:absolute; top:0px; left:0; background-color:#00f; ">
</div>
<div style="width:300px; height:1000px; position:absolute; top:3000px; left:0; background-color:#fff; ">
</div>

edited Aug 16 '14 at 11:49

Simon Marquis

7,248
1
28
43

answered Aug 16 '14 at 11:43

Savio Menezes

1
3

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

Add

body { height:4000px; }

I don't know why but Per Set position absolute and margin

margin-bottom will only do anything to an absolutely-positioned element if the element has no top property.

edited May 23 '17 at 12:02

Community

1
1

answered Aug 16 '14 at 12:06

Wayne

4,760
1
24
24

How to use margin-bottom to create length of the web page

3 Answers3