Solved

help getting div to expand vertically with CSS

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now