How to keep div's always at full width? - css

Question

Is there a way to prevent a DIV from cutting out from a dynamic filed content? when content is large enough it stays full width and zooms fine but when it's small it breaks off from top group.
Here is a copy of my html & css:
<style>
#title{
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background: beige;
padding: 7px 50px 7px 50px;
margin: 10px 0px 0px 0px; /* L&R margins need to be 0px */
}
#box1{ /* Outer Box */
float: left;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px; /* L&R margins need to be 0px */
padding: 0px 50px 10px 50px;
}
#box2{ /* Inner Box */
font-family: Arial;
float: right;
width: 50%;
font-weight: bold;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px; /* L&R margins need to be 0px */
padding: 0px 0px 0px 50px;
display: block;
}
#box3{ /* Footnotes */
margin: 0px;
float: left;
font-size: 1em;
text-align: justify;
background: beige;
padding: 0px 50px 30px 50px;
border-radius: 0px 0px 15px 15px;
}
#footnote_columns{
display: block;
overflow:hidden;
/*columns: auto auto; /* column-count: auto column-width: auto; */
column-fill: balance; /* not working!!! */
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-width: auto;
-moz-column-width: auto;
-webkit-column-width: auto;
column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
}
</style>
<!-- ====================== Page Title ===================== -->
<div id='title'>
<HR>
'Title' centered & full width
<HR>
</div>
<!-- ============ text box inside text box ================ -->
<div id="box1"> <!-- Left Side -->
<div id="box2"> <!-- Right Side -->
<p>
INNER Box2 text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh eu velit iaculis auctor non ac magna. In at enim quis mi aliquam vestibulum imperdiet eu magna. Ut aliquet arcu at felis dapibus euismod. Suspendisse dolor turpis, faucibus quis mollis vitae, iaculis vel urna. Integer sit amet dui malesuada justo facilisis rutrum sed vel neque. Cras condimentum est sit amet mi dapibus convallis. Donec molestie euismod velit id pharetra. Praesent sit amet eros at quam ullamcorper sodales. Aenean ligula dui, ultricies quis commodo ut, lobortis eu justo. Nulla dolor augue, vulputate at placerat in, ornare et purus. "
</p>
<HR>
</div>
<p>
OUTER Box1 text: " Etiam at pretium urna. Morbi condimentum consequat nisi, nec pulvinar tellus fermentum at. Cras ut sodales ante. Sed feugiat sem eget eros lobortis sit amet porttitor mauris tempus. Sed eros est, placerat at sollicitudin quis, scelerisque ac dolor. Proin mollis euismod condimentum. Morbi eget tortor justo, eu vestibulum orci. Pellentesque eu ante a nunc adipiscing sodales dictum vitae eros. Sed tellus mauris, volutpat non vulputate ut, vulputate ut orci. Vivamus facilisis ipsum a tellus gravida pellentesque. Nam risus magna, eleifend dignissim porttitor et, sagittis quis nisl.
Sed eget lorem magna. Sed sed imperdiet elit. Sed vulputate dapibus tellus, nec scelerisque risus hendrerit quis. Fusce aliquet erat non nibh egestas posuere. Aliquam ipsum velit, venenatis vel dictum ac, luctus nec sapien. In hac habitasse platea dictumst. Vivamus a elit augue. Integer pellentesque enim sit amet sem condimentum ut tincidunt nunc mollis. Cras in tellus eget dui pellentesque adipiscing. In varius ullamcorper felis, vitae sagittis turpis rutrum in. Aliquam consectetur consectetur erat, quis tristique magna laoreet id. Etiam orci arcu, ultricies eget interdum non, mollis quis est. Mauris odio lacus, tempus at porta quis, laoreet porta tortor. "
<HR>
</div>
<div id='box3'>
<div id='footnote_columns'>
<p>
FOOTNOTE Box3 text: " Vivamus egestas tempor molestie. Morbi scelerisque nunc non eros ultrices volutpat. Suspendisse potenti. Sed lobortis, odio vitae pharetra dapibus, risus turpis scelerisque risus, a dapibus dui ante sed ante. "
</p>
</div>
<HR>
</div>
<!-- ======================================================= -->
Example 1 works - has plenty of txt -
Example 2 breaks - when you zooming -
(1) http://jsfiddle.net/NuxWD/1/ - full text
(2) http://jsfiddle.net/NuxWD/2/ - try zooming, notice footnote
(3) http://jsfiddle.net/NuxWD/3/ - small amount of txt in footnote
(4) http://jsfiddle.net/NuxWD/4/ (5) http://jsfiddle.net/NuxWD/5/ - everything breaks!
Need this for dynamic content. If I remove the BR in example (4) the frame stays fine;
How can frame remain in full width even when paragraphs are short?
Notice bottom row, the Footnote, try adjusting amount of txt; or zoom out
IE does not even column footnote at all.
Why is the title not affected at all whether have smalls amount of txt or you zoom out ?