View Full Version : Expanding Side Bars Problem

May 21st, 2007, 07:42 AM
Hey guys,
Having an issue with my site here.

For some reason, I cannot get my side bars to expand downward with the content on my page. They just don't show. If I add content (like text or something) to the side bar's div, it will show up for however much content is in there (but I don't want to do that). I am pretty sure my div structure is correct, I just think I need to clear out some floats somewhere or something (which I have tried in several locations).

It is suppose to look like this screenshot of the design:

Here is my page where you can view the source:

Any help is greatly appreciated!


May 21st, 2007, 07:54 AM

I can't help you with the code, I am not competent. But I thought that you might like to know what I see.

IE7 - The picture comes up on the left (no sidebars) and fills the screen (with sidebars) when clicked.
Another click returns it to the first state.

Firefox - Behaves the same.

Opera - The whole screen comes up, completely filled, clicking makes no difference.


May 21st, 2007, 08:07 AM
You need to put the sidebar images in a div that is expanding with your content. The way you have it now, nothing makes .side-left or .side-right expand.

Like this:

<!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"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>StarCraft 2 Forums and Information Hub - StarCraftZone.com</title>

<style type="text/css">
/* StarCraftZone.com CSS Document */

/* Globals */
body {
background-color: #000000;
background-image: url(/images/background.gif);
background-position: top;
background-repeat: repeat-x;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;

img {
border: 0;

a {
color: #0078ff;
text-decoration: none;

a:hover {
color: #3f99ff;
text-decoration: underline;

h4 {
color: #ffc600;
font-size: 18px;
margin: 0;
padding: 0;
font-weight: normal;

h5 {
font-size: 12px;
font-weight: bold;
margin: 5px 0 5px 0;

/* Other */
#container {
margin: 0 auto;
width: 822px;
background: #000000 url(http://starcraftzone.com/images/side-bar-left.gif) repeat-y left;
#nested_container {
width: 822px;
background: url(http://starcraftzone.com/images/side-bar-right.gif) repeat-y right;

.container-inside {
width: 800px;
margin: 0 auto;
background-color: #000000;
background-image: url(/images/grid.gif);
background-position: left;
background-repeat: repeat-y;


.clear {
font-size: 0;
height: 0;
clear: both;

/* Header */
.banner {
background-image: url(/images/banner.gif);
background-position: center;
background-repeat: no-repeat;
height: 221px;

.nav {
text-align: center;
padding-top: 170px;

.nav a {
margin: 0 10px 0 10px;

/* Content */
.content {

.content-left {
width: 225px;
float: left;
padding: 0 5px 0 10px;
margin-top: 15px;

.content-right {
width: 544px;
float: left;
border-left: 1px solid #242424;
padding: 0 5px 0 10px;
margin-top: 15px;
background-image: url(/images/wraith.gif);
background-position: top right;
background-repeat: no-repeat;

/* Footer */
.footer {
text-align: center;
padding-top: 20px;
<div id="container">
<div id="nested_container"> <div class="container-inside">
<img src="index2_files/caution-bar-top.gif" alt=""><br>
<div class="banner">
<div class="nav">
<a href="http://starcraftzone.com/index.php">Home</a> <b>·</b>
<a href="http://starcraftzone.com/forums/">Forums</a> <b>·</b>
<a href="http://starcraftzone.com/fanart/">Fan Art</a> <b>·</b>
<a href="http://starcraftzone.com/staff/">Staff</a>
<div class="content">
<div class="content-left">
<div class="content-right">
<h4>StarCraft 2 Announced</h4>
<h5>SEOUL, South Korea – May 19, 2007</h5>
Entertainment® today unveiled StarCraft® II, the sequel to its
award-winning real-time strategy game StarCraft, at the 2007 Blizzard
Worldwide Invitational event in Seoul, South Korea. The announcement
took place inside the Olympic Gymnastics Arena, in front of thousands
of attendees, who received a presentation that included a StarCraft II
cinematic trailer and a gameplay demonstration by the development team.</p>
to be the ultimate competitive real-time strategy game, StarCraft II
will feature the return of the Protoss, Terran, and Zerg races,
overhauled and re-imagined with Blizzard's signature approach to game
balance. Each race will be further distinguished from the others, with
several new units and new gameplay mechanics, as well as new abilities
for some of the classic StarCraft units that will be making a
reappearance in the game. StarCraft II will also feature a custom
3D-graphics engine with realistic physics and the ability to render
several large, highly detailed units and massive armies on-screen
<p>"With StarCraft II, we'll be able to do
everything we wanted to do with the original StarCraft and more,"
stated Mike Morhaime, president and cofounder of Blizzard
Entertainment. "We recognize that expectations are high following the
long-running popularity of the original game, but we plan to meet those
expectations and deliver an engaging, action-packed, competitive
experience that StarCraft players and strategy gamers worldwide will
<p>StarCraft II will include a unique single-player
campaign, as well as fast-paced online play through an upgraded version
of Blizzard's renowned online gaming service, Battle.net®. In addition,
the game will come with a powerful, full-featured map editor that will
put the same tools used by Blizzard's designers into the hands of
<p>Blizzard is developing StarCraft II for
simultaneous release on the Windows® and Macintosh® PC platforms.
Further information about the game, including details on the
single-player, multiplayer, and map-editor features, as well as system
requirements, pricing, and availability, will be announced in the
months ahead. To learn more about StarCraft II, please visit the
official website at <a href="http://starcraft2.com/" target="_blank">www.starcraft2.com</a></p>
<div class="clear"></div>

<div class="footer">
© Copyright 2007, <a href="http://starcraftzone.com/">StarCraftZone.com</a> - All Rights Reserved<br>
<a href="http://kylespearrin.com/">A Kyle Spearrin Production</a>
<img src="index2_files/caution-bar-bottom.gif" alt="" style="padding-top: 10px;">
<!--closes nested_container--></div>
<!--closes container--></div></body></html>

May 21st, 2007, 08:35 AM
Thanks so much, yet again! I see what the problem is. ;)