I am banging my head against the wall, and hope someone can figure out where I am going wrong.
I am trying to create a 3 column page (working fine), with a second <div="box"> inside column 2 which will display a box using 3 images (top, bottom, and side). The problem is that the image making up the right side of the box won't display if I set the width to less than 600px. I need the box width to sit closer to 440px, but I can't figure out why the right side image won't display at this width. I am including the entire page with css below, can anyone help me understand what I'm missing? Thanks
<html><body>
<style type="text/css">
#wrap { margin-left: auto; margin-right: auto; width: 900px;}
#content { width: 100%; margin-top:30px; }
#content h2 {margin: 0; padding: 10px 0 10px 0;}
.three_column_wide_c_section,
{ clear: both; }
.three_column_wide_c_section .a_column, .three_column_wide_c_section .b_column, .three_column_wide_c_section .c_column,
{ float: left; margin-right: 24px; }
.three_column_wide_c_section .c_column,
{ margin-right: 0; }
.three_column_wide_c_section .a_column
{ width: 180px; }
.three_column_wide_c_section .b_column
{ /* background-color: #EFEFEF; */
width: 460px; padding-left: 15px; padding-right: 15px; margin-left: 15px; margin-right: 25px; }
.three_column_wide_c_section .c_column
{ width: 160px; }
.box { width:440px; padding:0 20px; margin-bottom:1em; background:url(img/boxside.gif) repeat-y;}
.box .boxtop { padding:22px 20px 0; margin:0 -20px; background:url(img/boxtop.gif) no-repeat 0 0; zoom:1; _margin-bottom:-1em;}
.box .boxbottom { padding:0 20px 1em; margin:0 -20px; background:url(img/boxbottom.gif) no-repeat 0 100%; }
.box .boxafter { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.box .cola{float: left; width: 62%; display: inline; background: blue;}
.box .colb{width: 32%; display: inline; background: orange;}
</style>
<div id="wrap">
<div id="content">
<div class="three_column_wide_c_section">
<div class="a_column">
Column 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="b_column">
<div class="box">
<div class="boxtop">
<h1>Welcome to Lorem Ipsum</h1>
</div> <!-- top -->
<div class="boxbottom">
<div class="cola">
<p><strong></strong><br />
Column A. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> <!-- cola -->
<div class="colb">
Column B. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div> <!-- bottom -->
</div> <!-- box -->
</div>
<div class="c_column">
Column 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div> <!-- 3 column -->
</div> <!-- content -->
</div> <!-- wrap -->
</body>
</html>