I’ve been working on a css layout for a friend of mine’s website and encountered a few problems maybe. Hopefully, you could help me out.
I have an html with body and a content blog div.
Everything seems working fine except the content blog div.
With the given settings below, the html output is only returning me the content blog div
with a height of 0. However, only when I fixed the height, it is displayed ok on the page.
My question here is why it always requires me to set a fixed height to the div in this case.
Any reference to CSS specification?
This is also created into fiddle here: http://jsfiddle.net/benmore/yZL4U/1/
While my expected output is here: http://jsfiddle.net/benmore/yZL4U/2/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body{
width: 960px;
margin-left:auto;
margin-right:auto ;
margin-top: 0px;
background:#5d9ab2 url(https://lh5.googleusercontent.com/-ZBLYo1oD6bM/UHox3oBICxI/AAAAAAAAAgo/yCg6TcxLeC4/s358/img_tree.png) no-repeat top left;
background-position: 200px 0px;
height: 100%;
}
.content_blog{
background: url(https://lh4.googleusercontent.com/-6vbAw73oSYI/UHqHD-7GLlI/AAAAAAAAAg8/3eDurdBo2wE/s191/blog_topic.jpg) top left no-repeat;
width: 920px;
margin: 0px 20px 0px 20px;
/*-- height: 200px; --*/
}
</style>
<title></title>
</head>
<body class="homepage">
<div class="content_blog"></div>
</body>
</html>
Set the min-height on the .content-blog div as seen here http://jsfiddle.net/calder12/yZL4U/4/ The reason is the div actually has no content. The browser does not see a background image as content, therefore it assumes the div is empty and renders it with 0 height.