AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of elliottbenzle
elliottbenzle
 asked on

help getting div to expand vertically with CSS

My page has a slide show with captions at the bottom of each image. The captions are surrounded by a grey box using CSS. Right now that grey box is set to always display at 50px. On some of the slides the caption box has too much text which wraps down to the next column and gets hidden. I would like to make the grey box expand vertically if the text overflows, but right now it just cuts off.

You can see the problem here, in the grey caption box:
http://www.glowfishtw.com/play3on3/index_slide_show.html

My code looks like this:

HTML
<div id="page-wrap">
                                                                  
      <div class="slider-wrap">
            <div id="main-photo-slider" class="csw">
                  <div class="panelContainer">

                        <div class="panel" title="Panel 1">
                              <div class="wrapper">
                                    <img src="main_slides/slide1.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          Play 3 on 3<br />
                                          <span>A youth basketball league for children ages 4-12. basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball </span>
                                    </div>
                              </div>
                        </div>
                        <div class="panel" title="Panel 2">
                              <div class="wrapper">
                                    <img src="main_slides/slide2.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          Get in the game<br />
                                          <span>All skill levels welcome</span>
                                    </div>
                              </div>
                        </div>            
                        <div class="panel" title="Panel 3">
........ etc for more slides

CSS (I'm pretty sure that this is the rule I need to change)
.photo-meta-data      { background: url(../main_slides/transpBlack.png); padding: 10px; height: 100%;
                        margin-top: -50px; position: relative; z-index: 9999; color: white; }

I set the height of the above to 100%, but this didn't fix the problem. If anyone has any ideas I would appreciate it. I've included my CSS include file and my main page is  below. Thanks for the help.


This is the main page where the slide show is displayed:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      
      <title>Featured Content Slider</title>
      
      <link rel="stylesheet" type="text/css" href="css/styles.css" />

      <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
      <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
      <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
      <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
      
      <script type="text/javascript">
      
            var theInt = null;
            var $crosslink, $navthumb;
            var curclicked = 0;
            
            theInterval = function(cur){
                  clearInterval(theInt);
                  
                  if( typeof cur != 'undefined' )
                        curclicked = cur;
                  
                  $crosslink.removeClass("active-thumb");
                  $navthumb.eq(curclicked).parent().addClass("active-thumb");
                        $(".stripNav ul li a").eq(curclicked).trigger('click');
                  
                  theInt = setInterval(function(){
                        $crosslink.removeClass("active-thumb");
                        $navthumb.eq(curclicked).parent().addClass("active-thumb");
                        $(".stripNav ul li a").eq(curclicked).trigger('click');
                        curclicked++;
                        if( 6 == curclicked )
                              curclicked = 0;
                        
                  }, 5000);
            };
            
            $(function(){
                  
                  $("#main-photo-slider").codaSlider();
                  
                  $navthumb = $(".nav-thumb");
                  $crosslink = $(".cross-link");
                  
                  $navthumb
                  .click(function() {
                        var $this = $(this);
                        theInterval($this.parent().attr('href').slice(1) - 1);
                        return false;
                  });
                  
                  theInterval();
            });
      </script>
</head>

<body>
      
      <div id="page-wrap">
                                                                  
      <div class="slider-wrap">
            <div id="main-photo-slider" class="csw">
                  <div class="panelContainer">

                        <div class="panel" title="Panel 1">
                              <div class="wrapper">
                                    <img src="main_slides/slide1.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          Play 3 on 3<br />
                                          <span>A youth basketball league for children ages 4-12. basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball basketball </span>
                                    </div>
                              </div>
                        </div>
                        <div class="panel" title="Panel 2">
                              <div class="wrapper">
                                    <img src="main_slides/slide2.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          Get in the game<br />
                                          <span>All skill levels welcome</span>
                                    </div>
                              </div>
                        </div>            
                        <div class="panel" title="Panel 3">
                                                            <div class="wrapper">
                                    <img src="main_slides/slide3.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          Volunteer<br />
                                          <span>If you have a few hours per week and like sports, <br />
sign up to be one of our coaches.</span>
                                    </div>
                              </div>
                        </div>
                        <div class="panel" title="Panel 4">
                              <div class="wrapper">
                                    <img src="main_slides/tempphoto-4.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          A Poem by Shel Silverstein<br />
                                          <span>Falling Up</span>
                                    </div>
                              </div>
                        </div>
                        <div class="panel" title="Panel 5">
                              <div class="wrapper">
                                    <img src="main_slides/tempphoto-5.jpg" alt="temp" />
                                    <div class="photo-meta-data">
                                          New Video on CSS-Tricks<br />
                                          <span>Using Wufoo for Web Forms</span>
                                    </div>
                              </div>
                        </div>
                        <div class="panel" title="Panel 6">
                              <div class="wrapper">
                                    <h1>A Tale of Two Cities</h1>
                                    <p><em>Charles Dickins</em></p>
                                    <blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
                              </div>
                        </div>

                  </div>
            </div>

            <a href="#1" class="cross-link active-thumb"><img src="main_slides/slide1.jpg" class="nav-thumb" alt="temp-thumb" width=75/></a>
  <div id="movers-row">
                  <div><a href="#2" class="cross-link"><img src="main_slides/slide2.jpg" alt="temp-thumb" width="75" class="nav-thumb" /></a></div>
                  <div><a href="#3" class="cross-link"><img src="main_slides/slide3.jpg" alt="temp-thumb" width="75" class="nav-thumb" /></a></div>
                  <div><a href="#4" class="cross-link"><img src="main_slides/tempphoto-4thumb.jpg" alt="temp-thumb" width="75" class="nav-thumb" /></a></div>
                  <div><a href="#5" class="cross-link"><img src="main_slides/tempphoto-5thumb.jpg" alt="temp-thumb" width="75" class="nav-thumb" /></a></div>
                  <div><a href="#6" class="cross-link"><img src="main_slides/tempphoto-6thumb.jpg" alt="temp-thumb" width="75" class="nav-thumb" /></a></div>
            </div>
       

      </div>
      
      </div>

</body>

</html>
@charset "utf-8";
html, body {
margin: 0;
padding: 0;
height:100%;
}

body {
	text-align: center;
	background-image: url(../images/wood_bg.jpg);
	background-repeat: repeat;
} 
.main_center {
	float: left;
	width: 580px;
}
.slide_show_holder {
	background-image: url(../images/slide_show_bg.png);
	background-repeat: no-repeat;
	height: 517px;
	width: 580px;
}


.main_left {
	float: left;
	width: 180px;
	padding: 0px;
}
.main_right {
	width: 220px;
	float: left;
	text-align: left;
	padding: 0px;
	background-color: #FF6;
}
.main_content {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}


#content {
	width: 900px;
	height: 80px;
	text-align: left;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(../images/header.png);
	padding-top: 150px;
	padding-left: 80px;
} 

.column { 
width: 50%; 
position: absolute; 
top: 0; 
} 

.left {left: 0;}         
.right {right: 0;} 

#leftcol {
	margin-right: 486px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

#rightcol {
	margin-left: 480px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

/*
	Featured Content Slider
	by: Chris Coyier
*/
*											{ margin: 0; padding: 0; }
body 										{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; }

					  				  
/*
	UTILITY STYLES
*/				  				  
					  				  
.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }


/*
	PAGE STRUCTURE
*/
#page-wrap 									{
	width: 570px;
	position: relative;
	min-height: 450px;
	background-image: url(../images/slide_show_bg.png);
	background-position: center top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #729dff; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; 
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider-wrap								{
	width: 530px;
	position: absolute;
	top: 20px;
	left: 20px;
}			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{
	position: relative;
	overflow: hidden;
	width: 530px;
	height: 356px;
	margin-bottom: 16px;
}
.stripViewer .panelContainer				{
	position: relative;
	left: 0;
	top: 0;
}
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 530px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{
	width: 90px;
	float: left;
}
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(../main_slides/transpBlack.png); padding: 10px; height: 100%; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{
	display: block;
	width: 62px;
	margin-top: -18px;
	position: relative;
	padding-top: 10px;
	z-index: 9999;
	left: 75;
}
.active-thumb 								{
	background: transparent url(../main_slides/icon-uparrowsmallwhite.png) top center no-repeat;
}

Open in new window

CSSHTMLAdobe Dreamweaver
Avatar of undefined
Last Comment
elliottbenzle
8/22/2022 - Mon
Kechka
Did you try with
height: auto;
ASKER CERTIFIED SOLUTION
Tom Beck
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
elliottbenzle
ASKER
Yes! Thank you very much.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent