SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make a content box expand

    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.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #box {
    * min-height: value;
    }
    
    * html #box {
    height: value; /* MSIE Fix */
    }

  3. #3
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 {
    }

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stephen

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

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •