CODEWITHSUNDEEP
htmlcss
Justin Meltzer
Justin Meltzer

Reputation: 13558

Why is this simple html and css code not showing anything?

html: 

<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>

css:

body {
margin:0;
padding:0;
}

#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}

The html file is called qa.html, and the css file is called qa.css The two files are in the same directory.

Upvotes: 0

Views: 3517

Answers (3)

BalusC
BalusC

Reputation: 1108972

a green div block that fills the middle 750 pixels of the page.

So,

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrap {
    width: 750px;
    height: 100%;
    margin: 0 auto;
    background: #008B00;
}

?

Upvotes: 2

Delan Azabani
Delan Azabani

Reputation: 81412

The div will collapse upon itself if there is no content and no height set. Either put some text or content into the div, or set a min-height or height explicitly.

Edit: please put a doctype in your pages; it helps a lot with expected renderings.

Upvotes: 3

mingos
mingos

Reputation: 24512

Um... How's the HTML supposed to show anything if there's no content?

[EDIT] To make it more specific and not sound like I'm complaining: put some content in the wrapper div, otherwise it's empty and thus with 0 height.

[EDIT 2]: According to the expected output you describe in the comment, you want the div to take up 100% height of the document. You need to specify this explicitly, ie body and #wrap need to have height:100%. Or even better, min-height.

Upvotes: 6

Related Questions