Make a content box expand

**stephenTMS** · Jun 29, 2006 16:11

How would you make a content box expand as more content is added. I know that you would set the left and right sides of the box as a background image and then somehow you could extend that as the box gets bigger.
I tried using height 100% but that just makes the box change size depending on how much content is in the box, I know this sounds contradicting but what I mean is that if I had one line of text the content box would shrink to wrap round the line of text. Instead I want the content box to be a certain size to begin with.

I hope that someone can help.

**Egor** · Jun 29, 2006 16:48

Code:

#box {
* min-height: value;
}

* html #box {
height: value; /* MSIE Fix */
}

**stephenTMS** · Jul 2, 2006 06:36

That would work the only thing is I have a seperate content div layer in between the 2 sides I want to expand as the content div layer is expanded.
Should have provided the code:

html:

Code:

<body>
<div class="wrapper">
  <div class="top_nav">
    <div align="center">Home | Forums | Members | Recent Matches | Upcoming Matches | Leagues/Tournaments | Contacts | Links </div>
  </div>
</div>
<div class="clear_welcome">
  <div class="clear_welcome_bar">
    <div id="clear_bar_text"><br />
      <br />
      <br />
    &nbsp;&nbsp;&nbsp;&nbsp;Welcome to the site guest, please login </div>
  </div>
  <div class="banner"><img src="images/banner.jpg" width="870" height="159" /></div>
</div>
<div class="ad_banner">
  <div class="ad_banner_content">
    <div class="ad_right"><img src="images/right_ad.jpg" /></div>
	  <div class="ad_top"><img src="images/top_ad.gif" width="799" height="29" /></div>
        <div class="ad_left"><img src="images/left_ad.gif" /></div>
         <div class="ad_image"><img src="images/test.jpg" width="795" height="71" /></div>
          <div class="ad_bottom"><img src="images/bottom_ad.gif" width="799" height="29" /></div>
	 
</div>
<div class="left_content_wrapper">
 <div class="left_content_top"><div class="left_content_heading">Welcome</div>
 </div>
  <div class="left_content_left"><img src="images/side_con_left.gif" width="8" height="264" /></div>
	<div class="left_content">
     <p>This is the content area, text goes here</p>
    </div>
    <div class="left_content_right"><img src="images/side_con_right.gif" width="8" height="264" border="0" /></div>
	 <div class="left_content_bottom"><img src="images/side_con_bottom.gif" width="249" height="9" /></div>
</div>  
</div>
</body>
</html>

CSS:

Code:

.wrapper {
	background-image: url(images/background.jpg);
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	font-family: tahoma;
	font-size: 10px;
	color: #000000;
}
.top_nav {
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	background-image: url(images/top_nav.jpg);
	width: 871px;
	margin-left: 14px;
}
.clear_welcome {
	font-family: tahoma;
	font-size: 10px;
	color: #000000;
	background-image: url(images/background.jpg);
	height: 100%;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
.clear_welcome_bar {
	font-family: tahom;
	font-size: 10px;
	color: #000000;
	background-image: url(images/glass_bar_above_banner.jpg);
	height: 60px;
	width: 871px;
	margin-left: 14px;
}
.banner {
	height: 159px;
	width: 857px;
	margin-left: 14px;
}
.ad_banner {
	height: 129px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/background.jpg);
}
.ad_banner_content {
	height: 129px;
	width: 863px;
	margin-left: 22px;
}
.ad_top {
	height: 29px;
	width: 799px;
}
.ad_left {
	height: 71px;
	width: 4px;
	float: left;
}
.ad_bottom {
	height: 29px;
	width: 799px;
	clear: left;
}
.ad_right {
	float: right;
	height: 129px;
	width: 64px;
}
.ad_image {
	height: 71px;
	width: 795px;
	float: left;
}
.left_content_wrapper {
	width: 249px;
	height: 301px;
	margin-left: 22px;
}
.left_content_top {
	height: 28px;
	width: 249px;
	background-image: url(images/side_con_top.gif);
}
.left_content_right {
	width: 8px;
	height: 100%;
	float: right;
	min-height: 264px;
	background-attachment: scroll;
}
.left_content_left {
	width: 8px;
	height: 100%;
	float: left;
	min-height: 264px;
}
.left_content_bottom {
	width: 249px;
	height: 9px;
	clear: both;
}
.left_content {
	height: 264px;
	width: 233px;
	float: left;
	font-family: tahoma;
	font-size: 12px;
	color: #000000;
}
.left_content_heading {
	width: 217px;
	height: 16px;
	margin-left: 15px;
	margin-top: 6px;
	font-family: tahoma;
	font-size: 10px;
	color: #000000;
}
#clear_bar_text {
}

**fisherboy** · Jul 2, 2006 19:22

Hi Stephen

Any chance of a link to the page? I'd like to see how it really looks.

**Tyssen** · Jul 2, 2006 20:44

You've got a bad case of divitis.
Also, any reason why you've used separate images for all of this?

Code:

 <div class="ad_banner">
   <div class="ad_banner_content">
     <div class="ad_right"><img src="images/right_ad.jpg" /></div>
 	  <div class="ad_top"><img src="images/top_ad.gif" width="799" height="29" /></div>
         <div class="ad_left"><img src="images/left_ad.gif" /></div>
          <div class="ad_image"><img src="images/test.jpg" width="795" height="71" /></div>
           <div class="ad_bottom"><img src="images/bottom_ad.gif" width="799" height="29" /></div>
 	 
 </div>

Can you not just use one image?

User Tag List

Thread: Make a content box expand

Thread Tools

Display

Make a content box expand

Bookmarks

Bookmarks

Posting Permissions