右に1絶対固定の2列を作る方法

Question

http://music.yandex.ruと同じページを行うには？ 2列あります。 1つはコンテナで、もう1つは右側に固定されています。どのようなフレームワークはそれのために良い？私はCSSの絶対的なnoobです。 SO

Answer 1

.container { 
 
    position: relative; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 100px; 
 
    background-color: #ccc; 
 
    border: 1px solid black; 
 
    border-radius: 4px; 
 
    padding:10px; 
 
} 
 
.main { 
 
    float: left; 
 
    width: 400px; 
 
    background-color: #e1e1e1; 
 
}

<div class="container"> 
 
    <div class="main"> 
 
    <p>Bacon ipsum dolor amet meatloaf pig meatball andouille short loin. Tail burgdoggen ribeye andouille leberkas, capicola alcatra fatback tongue tri-tip. Bresaola drumstick short ribs, kielbasa alcatra porchetta sirloin tail beef ribs jowl shoulder tongue 
 
     andouille t-bone. Turkey chuck tail filet mignon pig brisket, jowl ribeye swine ground round shoulder. Ground round kielbasa brisket bresaola turducken bacon rump alcatra landjaeger short loin prosciutto kevin pork belly andouille pastrami. 
 
    </p> 
 
    <p> 
 
     Pig rump shankle salami meatball tongue pork loin alcatra sausage shank. Kielbasa short ribs sirloin ground round cupim. Filet mignon sirloin meatball tenderloin tail shank. Shank ham hock tri-tip pork shankle sausage venison burgdoggen ground round.</p> 
 
    </div> 
 
    <div class="right"> 
 
    <p>Bacon ipsum dolor amet frankfurter meatball shankle corned beef short loin pork belly. Ham doner beef t-bone. Burgdoggen ham hock andouille shank boudin. Strip steak chicken doner turkey shoulder sirloin. Strip steak meatloaf prosciutto, salami sausage 
 
     swine pork loin drumstick. Chicken strip steak chuck beef, tail salami frankfurter shoulder short ribs ribeye.</p> 
 
    </div> 
 
</div>