Domanihatu Domanihatu - 4 months ago 4
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

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

Comments