Empty div (with style: height) will not display

up vote
13
down vote

favorite

Incredibly simple piece of HTML - but not displaying how I would expect.

I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"

Even though I have specified a height, my empty div will not display. What am I missing here?

UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?

Full code:

<html>

<head><title>Site Name</title>

</head>

<body>

<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>

<div style="width: 50%; margin: auto;">

<img src="logo.gif"></div> 



<div style="width: 50%; margin: auto;"></div>



</body>

</html>

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

2

Try adding display:block;
– rfoo
Sep 25 '13 at 1:41

What are you expecting to see?
– jono
Sep 25 '13 at 1:43

I made this fiddle and added borders to your divs. What are you expecting? jsfiddle.net/KyQgg/4
– rfoo
Sep 25 '13 at 1:44

@rosscowar I want the first div div style="height:400px; width:100%; margin:0; padding:0; position:absolute;" to display. Essentially I'm trying to really quickly create whitespace.
– azochz
Sep 25 '13 at 1:53

Well if you see in the fiddle, it is displaying. If you want white space for that other div consider adding, margin-top:400px;
– rfoo
Sep 25 '13 at 1:57

add a comment |

up vote
13
down vote

favorite

Incredibly simple piece of HTML - but not displaying how I would expect.

I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"

Even though I have specified a height, my empty div will not display. What am I missing here?

UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?

Full code:

<html>

<head><title>Site Name</title>

</head>

<body>

<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>

<div style="width: 50%; margin: auto;">

<img src="logo.gif"></div> 



<div style="width: 50%; margin: auto;"></div>



</body>

</html>

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

2

Try adding display:block;
– rfoo
Sep 25 '13 at 1:41

What are you expecting to see?
– jono
Sep 25 '13 at 1:43

I made this fiddle and added borders to your divs. What are you expecting? jsfiddle.net/KyQgg/4
– rfoo
Sep 25 '13 at 1:44

@rosscowar I want the first div div style="height:400px; width:100%; margin:0; padding:0; position:absolute;" to display. Essentially I'm trying to really quickly create whitespace.
– azochz
Sep 25 '13 at 1:53

Well if you see in the fiddle, it is displaying. If you want white space for that other div consider adding, margin-top:400px;
– rfoo
Sep 25 '13 at 1:57

add a comment |

up vote
13
down vote

favorite

Incredibly simple piece of HTML - but not displaying how I would expect.

I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"

Even though I have specified a height, my empty div will not display. What am I missing here?

UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?

Full code:

<html>

<head><title>Site Name</title>

</head>

<body>

<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>

<div style="width: 50%; margin: auto;">

<img src="logo.gif"></div> 



<div style="width: 50%; margin: auto;"></div>



</body>

</html>

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

Incredibly simple piece of HTML - but not displaying how I would expect.

I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"

Even though I have specified a height, my empty div will not display. What am I missing here?

UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?

Full code:

<html>

<head><title>Site Name</title>

</head>

<body>

<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>

<div style="width: 50%; margin: auto;">

<img src="logo.gif"></div> 



<div style="width: 50%; margin: auto;"></div>



</body>

</html>

css html5 css3 html

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

edited Sep 25 '13 at 1:56

asked Sep 25 '13 at 1:39

azochz

3572417

asked Sep 25 '13 at 1:39

azochz

3572417

asked Sep 25 '13 at 1:39

azochz

3572417

2

Try adding display:block;
– rfoo
Sep 25 '13 at 1:41

What are you expecting to see?
– jono
Sep 25 '13 at 1:43

I made this fiddle and added borders to your divs. What are you expecting? jsfiddle.net/KyQgg/4
– rfoo
Sep 25 '13 at 1:44

@rosscowar I want the first div div style="height:400px; width:100%; margin:0; padding:0; position:absolute;" to display. Essentially I'm trying to really quickly create whitespace.
– azochz
Sep 25 '13 at 1:53

Well if you see in the fiddle, it is displaying. If you want white space for that other div consider adding, margin-top:400px;
– rfoo
Sep 25 '13 at 1:57

add a comment |

2

Try adding display:block;
– rfoo
Sep 25 '13 at 1:41

What are you expecting to see?
– jono
Sep 25 '13 at 1:43

I made this fiddle and added borders to your divs. What are you expecting? jsfiddle.net/KyQgg/4
– rfoo
Sep 25 '13 at 1:44

@rosscowar I want the first div div style="height:400px; width:100%; margin:0; padding:0; position:absolute;" to display. Essentially I'm trying to really quickly create whitespace.
– azochz
Sep 25 '13 at 1:53

Well if you see in the fiddle, it is displaying. If you want white space for that other div consider adding, margin-top:400px;
– rfoo
Sep 25 '13 at 1:57

Try adding display:block;
– rfoo
Sep 25 '13 at 1:41

What are you expecting to see?
– jono
Sep 25 '13 at 1:43

I made this fiddle and added borders to your divs. What are you expecting? jsfiddle.net/KyQgg/4
– rfoo
Sep 25 '13 at 1:44

@rosscowar I want the first div div style="height:400px; width:100%; margin:0; padding:0; position:absolute;" to display. Essentially I'm trying to really quickly create whitespace.
– azochz
Sep 25 '13 at 1:53

Well if you see in the fiddle, it is displaying. If you want white space for that other div consider adding, margin-top:400px;
– rfoo
Sep 25 '13 at 1:57

add a comment |

4 Answers
4

active

oldest

votes

up vote
15
down vote

accepted

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

add a comment |

up vote
6
down vote

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

enter image description here

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

add a comment |

up vote
3
down vote

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

add a comment |

up vote
0
down vote

The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f18994830%2fempty-div-with-style-height-will-not-display%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

up vote
15
down vote

accepted

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

add a comment |

up vote
15
down vote

accepted

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

add a comment |

up vote
15
down vote

accepted

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

edited Sep 25 '13 at 1:56

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

answered Sep 25 '13 at 1:51

mdesdev

5,05011327

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

add a comment |

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

Doesn't work if you use height: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34

add a comment |

up vote
6
down vote

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

enter image description here

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

add a comment |

up vote
6
down vote

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

enter image description here

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

add a comment |

up vote
6
down vote

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

enter image description here

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

enter image description here

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

answered Nov 29 '16 at 16:02

Dmitri Larionov

14827

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

add a comment |

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 at 14:47

add a comment |

up vote
3
down vote

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

add a comment |

up vote
3
down vote

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

add a comment |

up vote
3
down vote

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

edited Sep 25 '13 at 1:54

answered Sep 25 '13 at 1:48

Shaun

366213

answered Sep 25 '13 at 1:48

Shaun

366213

answered Sep 25 '13 at 1:48

Shaun

366213

add a comment |

up vote
0
down vote

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

add a comment |

up vote
0
down vote

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

add a comment |

up vote
0
down vote

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

answered Nov 18 '17 at 16:23

broc.seib

14.5k64748

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky