We help IT Professionals succeed at work.

help getting div to expand vertically with CSS

elliottbenzle
on
712 Views
Last Modified: 2012-05-10
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

Comment
Watch Question

Commented:
Did you try with
height: auto;
CERTIFIED EXPERT
Top Expert 2015
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Yes! Thank you very much.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.