親のテキストは、その背後にあるのではなく、子の横にありますか？

Question

私はこれが初めてであることを認めていますので、前にこの質問に答えると私を許してください。おそらく、私が探している答えを見つけるために自分の質問を正しく言い表していないのかもしれません。

私は、左側にクイックリファレンスリンクを持つ子コンテナを持っており、参照するテキストは右側の親にあるはずです。親のテキストを緑色の表示可能領域に折り返し、親コンテナ全体（子の後ろ）には折り返さないようにするにはどうすればよいですか？

Text Wrapping Problem

<div class="ministry1"><div class="ministry2"> 
<ol id="sidebar1"> 
    <li><a href="#01">The Scripture</a></li> 
    <li><a href="#02">God</a> 
    <ul id="side1"> 
     <li><a href="#001">God the Father</a></li> 
     <li><a href="#002">God the Son</li> 
     <li><a href="#003">God the Holy Spirit</li> 
    </ul> 
    </li> 
<li><a href="#03">Man</a></li> 
<li><a href="#04">Salvation</a></li> 
<li><a href="#05">God's Purpose of Grace</a></li><!--'--> 
<li><a href="#06">The Church</a></li> 
<li><a href="#07">Baptism and the Lord's Supper</a></li><!--'--> 
<li><a href="#08">The Lord's Day</a></li><!--'--> 
<li><a href="#09">The Kingdom</a></li> 
<li><a href="#10">Last Things</a></li> 
<li><a href="#11">Evangelism and Missions</a></li> 
<li><a href="#12">Education</a></li> 
<li><a href="#13">Stewardship</a></li> 
<li><a href="#14">Cooperation</a></li> 
<li><a href="#15">The Christian and the Social Order</a></li> 
<li><a href="#16">Peace and War</a></li> 
<li><a href="#17">Religious Liberty</a></li> 
<li><a href="#18">The Family</a></li> 
</ol></div> 
<h1>Baptist Faith and Message</h1> 

<p id="box"> 

<h3 id="01"><u>I. The Scriptures</u></h3> 

（以下LOTS複数のテキストと...）

そして、次のように彼らはスタイルされている...

div.ministry1 { 
    display: block; 
    margin: auto; 
    background-color: #99ff99; 
    border: 2px solid #660066; 
    width: 1070px; 
    height: 446px; 
    overflow: auto; 
    font-family: 'Ubuntu', sans-serif; 
    opacity: 0.90; 
} 

div.ministry2 { 
    display: block; 
    position: fixed; 
    float: left; 
    background-color: lightblue; 
    border-right: 2px solid #660066; 
    width: 225px; 
    height: 446px; 
    overflow: auto; 
    font-family: 'Ubuntu', sans-serif; 
    opacity: 0.90; 
} 

#box { 
    float: right; 
    padding: 8px 10px 10px 10px; 
    opacity: 1.0; 
} 

Answer 1

あなたはすべてが幅を固定したい場合可能な限り最も簡単な解決法は、sidebar1を固定し、右側にdivのコンテナを使用してコンテンツをパディング - 左（または余白を残して、ここでは違いはない）にラップします。

コンテナを使用する（私はdivにするためにボックスをスワップしましたが、この要素をdisplay：blockにする必要があり、divのデフォルト表示です）。

div.ministry2 { 
    position: fixed; 
} 

.box { 
    padding-left: 250px; 
} 

あなたはこのソリューションはここにどのように見えるかを確認することができます。http://codepen.io/anon/pen/oLyEmV