Empty div (with style: height) will not display
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
asked Sep 25 '13 at 1:39
azochzazochz
3652417
add a comment |
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
asked Sep 25 '13 at 1:39
azochzazochz
3652417
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 divdiv 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 |
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
asked Sep 25 '13 at 1:39
azochzazochz
3652417
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
css html5 css3 html
asked Sep 25 '13 at 1:39
azochzazochz
3652417
asked Sep 25 '13 at 1:39
azochzazochz
3652417
edited Sep 25 '13 at 1:56
azochz
asked Sep 25 '13 at 1:39
azochzazochz
3652417
asked Sep 25 '13 at 1:39
azochzazochz
3652417
asked Sep 25 '13 at 1:39
azochzazochz
3652417
3652417
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 divdiv 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 divdiv 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
2
2
Try adding display:block;
– rfoo
Sep 25 '13 at 1:41
Try adding display:block;
– rfoo
Sep 25 '13 at 1:41
What are you expecting to see?
– jono
Sep 25 '13 at 1:43
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
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
@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
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
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;
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
Doesn't work if you useheight: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34
add a comment |
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.
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
add a comment |
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
answered Sep 25 '13 at 1:48
ShaunShaun
366213
add a comment |
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.seibbroc.seib
14.7k64848
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',
autoActivateHeartbeat: false,
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
Doesn't work if you useheight: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34
add a comment |
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;
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
Doesn't work if you useheight: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34
add a comment |
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;
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
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;
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
edited Sep 25 '13 at 1:56
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
answered Sep 25 '13 at 1:51
mdesdevmdesdev
5,06011327
5,06011327
Doesn't work if you useheight: 50%. How to make it work?
– akaltar
Jun 28 '16 at 17:34
add a comment |
Doesn't work if you useheight: 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
Doesn't work if you use
height: 50%. How to make it work?– akaltar
Jun 28 '16 at 17:34
add a comment |
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.
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
add a comment |
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.
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
add a comment |
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.
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
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.
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
answered Nov 29 '16 at 16:02
Dmitri LarionovDmitri Larionov
14728
14728
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
add a comment |
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
That is a brilliant solution!
– Rabbi Shuki Gur
Jan 15 '18 at 14:47
add a comment |
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
answered Sep 25 '13 at 1:48
ShaunShaun
366213
add a comment |
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
answered Sep 25 '13 at 1:48
ShaunShaun
366213
add a comment |
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
answered Sep 25 '13 at 1:48
ShaunShaun
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.
answered Sep 25 '13 at 1:48
ShaunShaun
366213
edited Sep 25 '13 at 1:54
answered Sep 25 '13 at 1:48
ShaunShaun
366213
answered Sep 25 '13 at 1:48
ShaunShaun
366213
answered Sep 25 '13 at 1:48
ShaunShaun
366213
366213
add a comment |
add a comment |
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.seibbroc.seib
14.7k64848
add a comment |
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.seibbroc.seib
14.7k64848
add a comment |
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.seibbroc.seib
14.7k64848
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.seibbroc.seib
14.7k64848
answered Nov 18 '17 at 16:23
broc.seibbroc.seib
14.7k64848
answered Nov 18 '17 at 16:23
broc.seibbroc.seib
14.7k64848
answered Nov 18 '17 at 16:23
broc.seibbroc.seib
14.7k64848
14.7k64848
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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