Solved

help getting div to expand vertically with CSS

Posted on 2010-09-11
3
619 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

0
Comment
Question by:elliottbenzle
3 Comments
 
LVL 10

Expert Comment

by:Kechka
ID: 33652579
Did you try with
height: auto;
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 33653104
Change your css for the photo-meta-data to this:


.photo-meta-data { background: url(../main_slides/transpBlack.png); padding: 10px; 	  position: absolute; bottom:0px; width:510px; z-index: 9999; color: white; }

Open in new window

0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 33654617
Yes! Thank you very much.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question