I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can anyone offer assistance?
Visit the JSFiddle link for reference.
HTML Code Snippet
<html>
<head>
<link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<div id="content">
<div id="postcontainer">
<div id="postpicture">
<img src="" width="80px" height="80px">
</div>
<div id="right">
<div id="postheader">
<div id="postname">
Sean Allen
</div>
<div id="postdate">
July 15, 2013
</div>
<div id="post">sample text.</div>
</div>
</div>
<br class="clear" />
</div>
</div>
</body>
</html>
CSS Code Snippet
html, body {
Padding:0px;
margin:0px;
background:#EDEDED;
}
#content{
width:900px;
height:auto;
min-height:1000px;
background:#FFFFFF;
}
#postcontainer{
width:auto;
height:auto;
background:green;
}
#postpicture{
width:80px;
height:80px;
float:left;
padding:8px;
border:2px solid #FFFFFF;
outline:1px solid #AAAAAA;
background:yellow;
}
#right{
width:800px;
height:auto;
float:right;
background:blue;
}
#postheader{
width:790px;
height:auto;
background:red;
}
#postname{
width:auto;
height:19px;
padding:5px;
padding-top:10px;
font-weight:600;
float:left;
background:brown;
}
#postdate{
width:auto;
height:19px;
padding:5px;
padding-left:10px;
padding-top:13px;
float:left;
font-size:13px;
background:purple;
}
#post{
width:785px;
height:auto;
padding-left:15px;
float:left;
background:orange;
}