HTML/CSS : 사이드 바가 페이지 오른쪽에있는 대신 페이지 하단에 나타납니다.

Question

왜 이런 일이 발생하는지 정확히 모르겠지만 사이드 바가 보이지 않는 문제가 발생합니다. 화면. 나는 간단한 것을 간과하고 있음을 알고 있지만 꽤 많은 시간 동안 코드를 실행했기 때문에이 문제를 일으키는 원인을 찾아 낼 수가 없다.

의견을 보내 주시면 대단히 감사하겠습니다.

http://jsfiddle.net/9e9X4/

HTML 코드 : 당신은 오른쪽 측면에 정확히 일치하는 #sidebar하려면

<div id="content-wrapper"> 

    <div id="content"> 
     <section id="main-content" role="main"> 

      <h2>BWL-T8-10-IXX-3000</h2> 


      <!-- article --> 
      <article id="post-131" class="post-131 page type-page status-publish hentry"> 
       <div class="entry-content"> 

        <p><strong>Two Foot Linear T8 LED Tube</strong> 
        </p> 
        <p>&nbsp;</p> 
        <p><strong>ELECTRICAL</strong> 
         <br />Input voltage: 100-277V 
         <br />Wattage: 10W</p> 
        <p><strong>OPTICAL</strong> 
         <br />Lamp Luminous Efficiency: &gt;110 lm/W 
         <br />Lumen Output: ~1100 lm 
         <br />Color temperature: 3000K 
         <br />Color rendering index: &gt;84 
         <br />Beam pattern: Circular 
         <br />Beam angle: 120 degrees 
         <br />Life spans: &gt;50,000 hours</p> 
        <p><strong>GENERAL</strong> 
         <br />Working temperature: -10C &#8211; 30C 
         <br />IP rating: IP40 
         <br />Product size: 26 x 600mm 
         <br />Net weight: 158.7g 
         <br />Warranty: 5 years</p> 
        <p><strong>Variants:</strong> 
        </p> 
        <p>Non-Dimmable, Single-End Input: 
         <br /> 
         <strong>BWL-T8-10-INS-3000</strong> 
        </p> 
        <p>Dimmable, Single-End Input: 
         <br /> 
         <strong>BWL-T8-10-IDS-3000</strong> 
        </p> 
        <p>Non-Dimmable, Two-End Input: 
         <br /> 
         <strong>BWL-T8-10-INT-3000</strong> 
        </p> 
        <p>Dimmable, Two-End Input: 
         <br /> 
         <strong>BWL-T8-10-IDT-3000</strong> 
        </p> 

       </div> 



       <br class="clear"> 

      </article> 
      <!-- /article --> 



     </section> 
    </div> 

    <!-- sidebar --> 
    <aside id="sidebar" role="complementary"> 

     <div id="widget_sp_image-11" class="widget widget_sp_image"> 
      <h4>T8 Tube Lighting &#8211; 10 watt</h4> 
      <img width="236" height="187" alt="T8 Tube Lighting &#8211; 10 watt" class="attachment-full alignleft" style="max-width: 100%;" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/t8-1.jpg" /> 
      <div class="widget_sp_image-description"> 
       <p><a class="button blue " href="tube-series/">T8 Tube Home</a> 
       </p> 
       <hr> 
       <p>Additional options: 
        <br /> 
        <a class="button blue " href="bwl-t8-10-ixx-3500/">Model BWL-T8-10-IXX-3500</a> 
       </p> 
       <p><a class="button blue " href="bwl-t8-10-ixx-5000/">Model BWL-T8-10-IXX-5000</a> 
       </p> 
      </div> 
     </div> 
     <div id="widget_sp_image-24" class="widget widget_sp_image"> 
      <img width="300" height="73" alt="" class="attachment-medium" style="max-width: 100%;" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/41-320x78.jpg" /> 
     </div> 
    </aside> 
    <!-- /sidebar --> 
</div> 
<!-- END #content-wrapper --> 
<footer id="footer"> 
    <div id="footer-inner" class="row"> 
    </div> 
</footer> 
<!-- END #footer --> 
<div id="footer-bar"> 
    <div class="right"> 
     <div id="footer-nav"> 
     </div> 
    </div> 
    <div class="left"> 
     Copyright &copy; 2014 Brighter World Lighting. Powered by 
     <a href="//wordpress.org" title="WordPress">WordPress</a> &amp; <a href="http://webtuts.pl/themes/corpo" title="Corpo Theme">Corpo Theme</a>. 
    </div> 
</div> 
</div> 
<!-- END #wrapper --> 

<div style="display:none"> 
</div> 
<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201414'></script> 

<script src="http://stats.wordpress.com/e-201414.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    st_go({ 
     v: 'ext', 
     j: '1:2.5', 
     blog: '58938147', 
     post: '131', 
     tz: '0' 
    }); 
    var load_cmc = function() { 
     linktracker_init(58938147, 131, 2); 
    }; 
    if (typeof addLoadEvent != 'undefined') addLoadEvent(load_cmc); 
    else load_cmc(); 
</script> 
</body> 

</html> 
<!-- Dynamic page generated in 0.707 seconds. --> 
<!-- Cached page generated by WP-Super-Cache on 2014-04-06 05:15:23 --> 

<!-- Compression = gzip --> 

Answer 1

왼쪽 콘텐츠로 시도해보십시오.

#sidebar{  
    position:absolute; 
    right:0;top:0; 
} 

DEMO

또는 당신은 주요 내용 아래, 오른쪽으로, 사용하려는 경우 :

#sidebar{  
    float:right; 
} 

을

Answer 2

이 주요 콘텐츠 플로트를 가진 시도는 함께,

#content { float:left }