I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.
Main Page:
<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>
</head>
<div id="main">
<!-- Menu Start -->
<div id="menu">
<ul>
<li><a href="index.php">home</a></li>
<li><a href="index.php">about me</a></li>
<li><a href="index.php">archives</a></li>
<li><a href="index.php">contact</a></li>
<li><a href="index.php">gallery</a></li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End -->
<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
$page = 1;
}
else {
$page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);
$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";
$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
$get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
$category = mysql_fetch_array($get_categories);
?>
<p><?php echo "<p><strong><a href=\"post.php?id=". $id . "\">" . $title . "</a></strong></p>"; ?><br /><br />
<?php echo $entry; ?><br /><br />
<p>Posted in <a href="category.php?category=<?php echo $row['category']; ?>"><?php echo $category['category_name']; ?></a> on <?php echo $date; ?></p>
<hr /></p>
<?php
}
?>
<div id="pages">
<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
$prev = ($page - 1);
echo "<a href=\"?page=$prev\"><< Newer</a> ";
}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";
}
else {
echo "<a href=\"?page=$i\">$i</a> ";
}
}
if ($page < $total_pages) {
$next = ($page + 1);
echo "<a href=\"?page=$next\">Older >></a>";
}
?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">
<!-- Item 1 -->
<div id="side-item">
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>
</div>
<!-- Item 2 -->
<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p><a href="http://www.twitter.com/UltanKc">Latest Tweet:</a></p></div>
<div id="tweet">
<?php
function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";
$xml = simplexml_load_file($url) or die("could not connect");
foreach($xml->status as $status){
$text = $status->text;
}
echo $text;
}
getTwitterStatus("UltanKC");
?>
</div>
<br>
<ul>
<li id="social"><a href="#">YouTube</a></li>
<li id="social"><a href="#">Twitter</a></li>
<li id="social"><a href="#">LastFM</a></li>
<li id="social"><a href="#">Email</a></li>
</ul>
</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");
while ($row = mysql_fetch_array($result)) {
$get_year = $row['get_year'];
$entries = $row['entries'];
echo "<a href=\"archives.php?year=" . $get_year . "\">Entries from " . $get_year . "</a> (" . $entries . ")<br />";
}
?>
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");
while($row = mysql_fetch_array($result1)) {
$result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
$num_entries = mysql_fetch_array($result2);
echo '<a href="category.php?category=' . $row['category_id'] . '">' . $row['category_name'] . '</a> (' . $num_entries['entries'] . ')<br />';
}
?>
</div>
</div>
</div>
<!-- Sidebar End -->
</div>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
height: 100%;
}
#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
}
#main {
width: 860px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
#menu li {
display: inline;
list-style-type: none;
height: 20px;
margin-top: 10px;
margin-left: 5px;
}
#menu a, menu a:visited{
font-family: arial;
color: #ffffff;
text-decoration: none;
padding: 3px;
}
#menu a:hover{
font-family: arial;
color: #282828;
text-decoration: none;
padding: 3px;
background-color: #ffffff;
}
#search{
float: right;
}
.sidebar {
width: 260px;
height: 100%;
float: right;
margin-right: 4px;
}
#posts {
width: 590px;
height: 100%;
float: left;
}
#side-item h2 {
background-color: #282828;
width: 245px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#side-item-content{
border:1px solid #dadada;
padding: 5px;
width: 243px;
margin-bottom: 12px;
}
#side-item h2 img {
margin-right: 6px;
float: left;
}
#side-item h2 a:link {
text-decoration: none;
color: #ffffff;
}
#side-item h2 a:hover {
text-decoration: underline;
color: #ffffff;
}
#side-item h2 a:visited {
text-decoration: none;
color: #ffffff;
}
#social {
background-color: #282828;
width: 223px;
height: 20px;
font-size: 20px;
font-family: arial;
color: #ffffff;
display: block;
margin-top: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px;
}
/*#social img {
float: left;
padding-top: -12px;
}*/
#social a:link {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
#tweet {
width: 221px;
padding: 10px;
color: #242424;
background-color: #f5f5f5;
border:1px solid #282828;
margin-bottom: -8px;
font-family: arial;
}
#social a:hover{
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: underline;
}
#social a:visited {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
.tweet-title {
background-color: #2dbfe9;
color: #ffffff;
width: 231px;
height: 20px;
border-left:1px solid #282828;
border-right:1px solid #282828;
border-top:1px solid #282828;
font-size: 20px;
padding: 5px;
font-family: arial;
}
.tweet-title a:link, .tweet-title a:visited {
color: #ffffff;
text-decoration: none;
}
.tweet-title a:hover {
color: #2dbfe9;
text-decoration: none;
background-color: #ffffff;
}
#pages {
float: left;
}
Image:
