0

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>
2
Contributors
2
Replies
4
Views
7 Years
Discussion Span
Last Post by jimmiller96
0

Ahhhh, that was the problem, the image width was wider than I thought. Thanks for the heads up!

I have another question related to this code, but I'll start another thread.

Thanks again!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.