Solved

help getting div to expand vertically with CSS

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Disable selected option from one select box when selected in another select box 26 65
bootstrap wrap text 1 30
need help with share buttons 11 66
Can't get cursor to change 3 15
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 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