Hi All,
I am trying to get my news box to stretch down as the client adds news items. Also the rest of the page needs to stretch to contain this box as well. I have searched for an answer to this problem but cannot seem to work it out. All help much appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Roberts Bistro</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="primary.css">
</head>
<body>
<div id="container">
<div id="header">
<?php
include("header.php");
?>
</div>
<?php
include("horiznav.php");
?>
<div id="facebook"><?php
include("facebook.php");
?></div>
<div id="twitter"><?php
include("twitter.php");
?></div>
</div>
<div id="content">
<h1><img src="images/welcome.jpg"></h1>
</div>
<div id="rightside">
<ul class="rightnav">
<?php
include("rightnav.php");
?>
</ul>
<div id="news">
<h3>Bistro News</h3>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi n</p>
</div>
</div>
</div>
<div id="footer">
<?php
include("footer.php");
?>
</div>
</body>
</html>
CSS
html{
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
h1 {
position:relative;
top:20px;
left:40px;
font-family:arial, verdana;
}
#container {
margin:40px auto;
padding:0 auto;
width:960px;
height:960px;
background:#fff;
}
#header {
width:960px;
height:120px;
}
a {
outline:none;
}
a,img {
border:none;
}
#facebook {
position:absolute;
top:210px;
left:1000px;
}
#twitter {
position:absolute;
top:210px;
left:1050px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
width:192px;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
border-top:1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 5px 15px 5px 35px;
background: #ffffff;
white-space: nowrap;
}
ul li a:hover {
background: #cccccc;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #666; }
li:hover li a:hover {
background: #;
}
#logo {
position:absolute;
top:60px;
left:180px;
}
#content {
float:left;
width:730px;
height:700px;
background:#fff;
}
#rightside {
width:230px;
height:700px;
background:#fff;
float:left;
}
.menu {
margin:0;
padding:0;
padding:5px 0;
width:192px;
color:#fff;
text-align:center;
background:#ccc;
}
.rightnav ul{
position:relative;
top:100px;
right:-20px;
}
.rightnav li{
display:block;
width:192px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
.rightnav li a{
border:0;
margin:0;
}
#news {
position:relative;
top:300px;
right:-20px;
width:190px;
height:auto;
height:400px;
border:2px solid #ccc;
}
#news h3 {
margin:0;
padding:0;
position:absolute;
top:5px;
left:40px;
}
#news p {
position:absolute;
top:20px;
padding:0 6px;
}
#footer {
position:absolute;
top:992px;
left:850px;
}
.copyright{
color:#fff;
}