www.webdeveloper.com
Results 1 to 1 of 1

Thread: Moving from a table layout to div layout question

  1. #1
    Join Date
    Jul 2009
    Posts
    1

    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

    <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>
    .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;
    }
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles