Member Avatar for jimmiller96

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
  • 102 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by jimmiller96

Dani AI

Generated

Good catch by — the problem turned out to be the image file itself being larger than the space you thought you had, which is the most common cause when edge graphics suddenly "disappear" as a layout shrinks. The box technique you described (top/side/bottom images) works fine, but it relies on the image widths lining up exactly with the element and any extra padding or margins not pushing the visual edge out of view.

Quick ways to check and avoid this in future: open the image URL directly to see its intrinsic pixel dimensions, and use the browser inspector to view the computed width of the box and its padding/margins. Remember that padding and margins add to the total space an element needs unless you use a different box model. For a plain explanation of how widths are calculated, see the MDN box model guide (The CSS box model).

Fix options (from least to most robust): crop or resave the side image to the exact width you need; scale it with CSS using background-size if you can tolerate scaling (see background-size); or switch to modern approaches like border-image or CSS3 multiple backgrounds for more flexible slicing. Also consider box-sizing: border-box so padding is included in the declared width, which prevents accidental overflow when you set fixed widths.

Short checklist to reproduce/debug:

  • Open the image directly to confirm its natural width.
  • Inspect the box element to see computed width + padding/margins.
  • Temporarily add a contrasting outline or background color to visualize boundaries.
  • Either trim/replace the image or use CSS scaling/border-image to match the layout.

This keeps the three-image box approach workable and makes future size changes predictable.

Recommended Answers

All 2 Replies

Member Avatar for cfajohnson

How wide are your images?

Why are you specifying widths in px?

Member Avatar for jimmiller96

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.