1 reply [Last post]
jocojr
jocojr's picture
Offline
newbie
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2014-01-13
Posts: 1
Points: 2

I am working on this page.
http://www.freshbikescycling.com/index.php/store/quick_product_detail/specialized-roubaix-sl4-expert

However on the first tab "Description" the DIV is not growing in height to accommodate the text... well or at least the background isn't. Please help me fix my issue so the background expands with the length of the text.

      <div id="tabs_container">
        <div id="tabs">
 
          <ul>
            <li class="active"> <a href="#tab-1">Description</a> </li>
            <li> <a href="#tab-2">Geometry</a> </li>
            <li><a href="#tab-3">Specifications</a></li>
          </ul>
          <div style="display: block;" id="tab-1"> <p><br>
Smoother is faster. The more comfortable and less fatigued you are at the end of a 4 hour ride, the stronger you'll be. Like shocks on a race car, the Zertz vibration damping inserts on the Roubaix SL4 help absorb road impact and keep power planted firmly on the road - couple that with a FACT carbon 10r frame and it's still plenty stiff to thrash around in a sprint. Just ask four time Paris-Roubaix champion Tom Boonen</p>
 
<ul>
	<li>Specialized SL4 FACT 10r frame with Zertz is fast and smooth, with incredible light weight, size-specific engineering, and tapered headtube; FACT carbon fork with Zertz has size-specific engineering to create a more balanced and stable ride for riders of different sizes</li>
	<li>Specialized Roubaix Pro 23/25C is fast like a competitive tire, but features unique casing technologies for added comfort and puncture protection</li>
	<li>New Shimano Ultegra 11-speed mechanical drivetrain delivers light-action, precision shifting in a lightweight system, creating one of the finer parts kits available</li>
	<li>Romin Expert Gel saddle, with hollow Ti rails, delivers the same ergonomically designed, scientifically-proven Body Geometry features that allow riders to deliver power in high-performance positions</li>
	<li>The revolutionary CG-R post features 18mm of vertical compliance and Zertz vibration damping, while FACT carbon construction delivers unsurpassed comfort, control, and efficiency without adding weight or complication to the frame</li>
</ul></div>
          <div style="display: none;" id="tab-2">
              <h3>   
 SuperSix Women’s</h3>
 
       <span class="datagrid">
              <table>
                <thead>
                  <tr>
                    <th>Size</th>
                    <th>Seat Tube</th>
                    <th>Top Tube</th>
                    <th>Effective Tob Tube</th>
                    <th>Stack</th>
                    <th>Reach</th>
                    <th>Head Tube</th>
                    <th>Head Tube Angle</th>
                    <th>Seat Tube Angle</th>
                  </tr>
                </thead>
                <tbody>
 
 
 <tr class="">
                    <td>44</td>
                    <td>44</td>
                    <td>50.5</td>
                    <td>50.5</td>
                    <td>50.5</td>
                    <td>36.4</td>
                    <td>10.5</td>
                    <td>70.5</td>
                    <td>76</td>
                  </tr>
 
 <tr class="alt">
                    <td>48</td>
                    <td>48</td>
                    <td>51.5</td>
                    <td>51.5</td>
                    <td>51.5</td>
                    <td>36.9</td>
                    <td>11</td>
                    <td>72</td>
                    <td>74.5</td>
                  </tr>
 
 <tr class="">
                    <td>51</td>
                    <td>51</td>
                    <td>52</td>
                    <td>52</td>
                    <td>53.5</td>
                    <td>37.0</td>
                    <td>13</td>
                    <td>72.5</td>
                    <td>74.5</td>
                  </tr>
 
 <tr class="alt">
                    <td>54</td>
                    <td>54</td>
                    <td>53.5</td>
                    <td>53.5</td>
                    <td>55.6</td>
                    <td>37.0</td>
                    <td>15</td>
                    <td>73</td>
                    <td>73.5</td>
                  </tr>
 
 
 
                </tbody>
              </table>
              </span>
 
</div>
          <div style="display: none;" id="tab-3">
<h3>Specifications</h3>
              <span class="datagrid">
              <table class="specs">
                <tbody>
 
 <tr class="alt">
                    <td>Fork</td>
                    <td>Sl4</td>
                  </tr>
 
 
                </tbody>
              </table>
</span>
</div>
 
 
</div>
        </div>
 

Here is the CSS

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}
#tabs {
    color: #FF0000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin: 0;
    padding-left: 0;
}
#tabs ul {
    background: none repeat scroll 0 0 #1F1F1F;
    float: left;
    margin-bottom: 0;
    padding-top: 4px;
    width: 500px;
}
#tabs li {
    color: #FFFFFF;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    list-style: none outside none;
    margin-left: 8px;
}
* html #tabs li {
    display: inline;
}
#tabs li, #tabs li a {
    float: left;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}
#tabs ul li.active {
    background-color: #292929;
    border-color: #000000 #000000 #292929;
    border-style: solid;
    border-width: 1px;
}
#tabs ul li.active a {
    color: #C1F80C;
}
#tabs div {
    background: none repeat scroll 0 0 #292929;
    border-color: #000000;
    border-style: none solid solid;
    border-width: 1px;
    clear: both;
    color: #FFFFFF;
    min-height: 200px;
    padding: 15px;
}
#tabs div h3 {
    font-weight: normal;
    margin-bottom: 12px;
}
#tabs div p {
    line-height: 150%;
}
#tabs ul li a {
    color: #B2B2B2;
    padding: 8px;
    text-decoration: none;
}
.thumbs {
    border: 1px solid #000000;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi jocojr, Try: #tabs div{

Hi jocojr,
Try:

#tabs div{
 overflow:hidden;
}

Because the contents are floated you need to give the container block formatting context.
You could also read up on clearfix for more background information.