html - CouchCMS - Floated Elements Not Floating Properly -

i'm new here , of beginner in html , css. i'm working on project using both couchcms content management , bootstrap responsive framework. give short background, i've set custom.css file , have linked accordingly website bootstrap css. i'm going through steps create "blog list" page list blog snippets on 1 page, , what's happening sidebar appearing on right, below first element instead of side side.

what i've noticed 1 post on page shows way it's supposed to, 2nd added moves bottom half of page on right.

here 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 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 sidebar-->      <div style="clear: both;"></div>  </div>

another thing i've noticed when go page shows multiple blogs, couchcms automatically creates news-content div. i'm thinking may problem , float:right making sidebar appear on bottom right half of page because comes after 2nd news-content, if issue, have no idea how fix it. i've been rearranging code in different ways try , see if can fix , have been searching web few hours , have come no solution.

well feel idiot. figured out while rearranging code. had change cms:pages beginning , ending tags include content of post , not div tags. once made change, showed wanted to.

my new code looks this:

<div id="main">    <div id="news-content">      <div id="cms-blog">        <cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>          <!-- changed go after 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 come before closing div tags instead of after-->        </div>    </div>    <div id="my-sidebar"></div>    <div style="clear: both;"></div>  </div>