CouchCMS - Floated Elements Not Floating Properly

Question

I'm new here and also somewhat of a beginner in Html and CSS. I'm currently working on a project using both CouchCMS for content management and then Bootstrap for the responsive framework. To give a short background, I've set up a custom.css file and have linked it accordingly to the website as well as the bootstrap css. I'm currently going through the steps to create a "Blog List" page to list all my blog snippets on one page, and basically what's happening is the sidebar is appearing on the right, but below the first element instead of side by side.

What I've noticed is that with just 1 post on the page it shows the way it's supposed to, however as soon as a 2nd is added it moves to the bottom half of the page on the right.

Here is my Code:

#main {
  width: 90%;
  margin: 40px auto;
}
#news-content {
  float: left;
  width: 60%;
  margin: 0 3% 0 5.5%;
  border-radius: 10px;
  background-color: white;
}
#my-sidebar {
  float: right;
  width: 26%;
  height: 100%;
  margin: 0 5.5% 0 0;
  border-radius: 10px;
  background-color: white;
}
#cms-blog {
  width: 90%;
  height: inherit;
  margin: 25px 0 0 5%;
}

<div id="main">
  <cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
    <!--Begin of CouchCMS Blog List-->

    <div id="news-content">
      <!--Wrapper for Left Side Blog Content-->

      <div id="cms-blog">
        <h1><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h1>
        <cms:if k_page_foldertitle>
          <cms:set my_category=k_page_foldertitle />
          <cms:else />
          <cms:set my_category='Uncategorized' />
        </cms:if>
        <h6><a href="#"><cms:show my_category /></a> &bull; <cms:date k_page_date format='M jS, y' /> &bull; <a href="#">                   <cms:show k_comments_count /> Comments</a></h6>
        <hr />
        <img src="<cms:show blog_image />" alt="" width="100%" />
        <cms:show blog_content />
        <p class="clearfix"><a href="news_entry.php">Read More...</a>
        </p>
      </div>
    </div>
  </cms:pages>
  <!--End of CouchCMS Blog List-->

  <div id="my-sidebar"></div>
  <!--Wrapper for Sidebar-->

  <div style="clear: both;"></div>
</div>

Another thing I've noticed is that when I go to the page which shows multiple blogs, CouchCMS automatically creates another news-content DIV. I'm thinking this may be the problem and the float:right is making the sidebar appear on the bottom right half of the page because it comes after the 2nd news-content, however if this is the issue, I have no idea how to fix it. I've been rearranging my code in different ways to try and see if I can fix it and have been searching the web for a few hours now and have come up with no solution.

score 1 · Accepted Answer · answered Jul 21 '15 at 18:57

Well now I feel like an idiot. I figured it out while rearranging the code. All that I had to do was change my cms:pages beginning and ending tags to only include the content of the post and not the div tags. Once I made the change, it immediately showed as I wanted it to.

My new code looks like this:

<div id="main">
  <div id="news-content">
    <div id="cms-blog">
      <cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
        <!-- I changed this to go after the beginning div tags instead of before-->

        <h1><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h1>
        <cms:if k_page_foldertitle>
          <cms:set my_category=k_page_foldertitle />
          <cms:else />
          <cms:set my_category='Uncategorized' />
        </cms:if>
        <h6><a href="#"><cms:show my_category /></a> &bull; <cms:date k_page_date format='M jS, y' /> &bull; <a href="#"><cms:show k_comments_count /> Comments</a></h6>
        <hr />
        <img src="<cms:show blog_image />" alt="" width="100%" />
        <cms:show blog_content />
        <p class="clearfix"><a href="news_entry.php">Read More...</a>
        </p>
      </cms:pages>
      <!--I changed this to come before the closing div tags instead of after-->

    </div>
  </div>
  <div id="my-sidebar"></div>
  <div style="clear: both;"></div>
</div>

CouchCMS - Floated Elements Not Floating Properly

1 Answers1