Domanihatu Domanihatu - 1 year ago 46
HTML Question

Parent text wrapping beside child instead of behind it?

I will be the first to admit that I am new to this so please forgive me if this question has been answered before. Perhaps I am not wording my question correctly to find the answer I am looking for.

I have a child container with quick reference links on the left and the text it is to reference should be in the parent on the right. How do I get the text in the parent to wrap in the green viewable area and not across the whole parent container (behind the child)?

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>


(with LOTS more text below...)

And they are styled as follows...

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 Source

If you want everything to be fixed width, the easier possible solution will be making sidebar1 fixed and wrapping content on the right with div container with satisfying padding-left (or margin-left, it should make no difference here).

Using your containers (although I swapped box to be div, I need this element to be display: block, and it's default display for div).

div.ministry2 {
  position: fixed;
}

.box {
  padding-left: 250px;
}

You can check how this solution looks here: http://codepen.io/anon/pen/oLyEmV