Moving from a table layout to div layout question

Recently I have been working on a project that is becoming a web based RSS reader. Originally I had gone with a table driven layout (using some CSS to format a bit) and that was going fine. I was then presented with a new requirement, and that was to eliminate the table based layout and work with divs.

Previously I had limited knowledge on divs and had to start some research on the tag. Obviously after some research, I have found that divs seem to be much more powerful when it comes to design, but with a slightly steeper learning curve.

The main problem I am having right now is some odd wrapping that one of my “main” divs is doing. I created a wrapper to hold my navigation panel and my main content area, but my main content area is wrapping under the navigation. I attached an image to give you an idea of the layout I am currently going for. You can tell the navigation will size dynamically based on the number of RSS feeds that a user subscribes to. I just want that column to continue down and not have anything wrap under it.

I also am including the section of div’s I am using and the CSS. I have read though a lot of forum post here and have spent a great amount of time on google trying to find a solution ? Sadly, most of my personal references know very little on CSS and web programming! Thanks in advance!

-Jimmy

[QUOTE]

<div class=”shell”>
<div class=”headerWrapper”>
<div class=”headerLeft”><h1>RSS Reader Logged In</h1></div>
<div class=”headerRight”>
<p><br><?php echo ‘Welcome ‘ . $this->session->userdata(‘USER_FNAME’) . ” ” . $this->session->userdata(‘USER_LNAME’) . ‘!’?><br>
<br><?php echo ‘<a href=”‘ . site_url(‘/user_manage/’) . ‘”>Manage Account</a>’ ?>
/ <?php echo ‘<a href=”‘ . site_url(‘/user_home/logout/’) . ‘”>Logout</a>’ ?></p>
</div>
</div>
<div class=”bufferDiv”><hr></div>
<div class=”mainWrapper”>
<div id=”navigation” class=”col_one”>
<?php
if(count($feeds) > 0)
{
$feedSize = count($feeds);

for($i = 0; $i < $feedSize; $i++)
{
if($i == $openFeed)
{
echo “<div class=”feedCellLeftSelected”>”.$feeds[$i].”</div>”;
}
else
{

echo “<div class=”feedCellLeft” onClick=”window.location='”.site_url(‘user_home/changeFeed/’.$i.’/’).”‘”>”;
echo $feeds[$i];
echo “</div>”;
}
}
}
?>
</div>
</div>
<div id=”main” class=”col_two”>
<?php
$i = 0;
foreach($titles as $title)
{
echo “<div>”;
echo anchor(site_url(‘user_home/setDescription’) . “/” . $i, “<h3>”.$title.”</h3>”);
echo “</div>”;
$i++;
}
?>
</div>
<div class=”bufferDiv”><hr></div>
<div class=”readArticle”>
<?php echo $curDescription; ?>
<br>
<?php if($curLink != “”){echo anchor_popup($curLink, “Read Full Story”);}?>
</div>
<div class=”footer”><p>Footer</p></div>
</div>

[/QUOTE]

[QUOTE]

.shell
{
background-color: #FFFFFF;
width: 800px;
}

.headerWrapper
{
width: 800px;
}

.headerLeft
{
float: left;
}
.headerRight
{
float: right;
}

.mainWrapper
{
float: left;
width: 800px;
}

.col_one
{
float: left;
width: 200px;
}

.col_two
{
float: right;
width: 600px;
}

.bufferDiv
{
clear: both;
}

.readArticle
{
clear: both;
}

.footer
{
clear: both;
}

[/QUOTE]

[upl-file uuid=9f630a51-9cfd-48b7-b732-0934b427a042 size=37kB]rssReader.JPG[/upl-file]

Also in #CSS _↴