• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 73957
  • Last Modified:

Control div height

I have nested div where I want the height of the outer div to be fixed, and for the inner divs to be truncated if too tall to fit inside.
The inner div's should also be centered vertically if they are shorter than space available in the outer div.

How can I achieve this?  Here's my code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<body>
<style type="text/css">
      span#adTitle
      {
            font-family: arial, sans-serif;
            font-size: 11px;
            font-weight: bold;
            text-decoration: underline;
            color: #336699;
      }
      
      span#adDescription
      {
            font-family: arial, sans-serif;
            font-size: 11px;
            float: left;
            top: 12px;
      }
      
      div#ads
      {
            width: 500px;
            height: 60px;
            background-color: #ff0000;
            padding: 10px;
            border: 1px solid #999999;
      }
      
      div#ad
      {
            float: left;
            width: 150px;
            text-align: center;
            background-color: #f5f5f5;
            border: 1px solid #999999;
      }
      
      div#spacer
      {
            float: left;
            width: 2;
      }

</style>

<body>

      <div id="ads">
            <div id="ad">
                  <span id="adTitle">
                        <a href="" target=_top>Compare Travel Insurance</a>
                  </span>
                  <span id="adDescription">
                        Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.
                  </span>
            </div>
            <div id="spacer">&nbsp;</div>
            <div id="ad">
                  <span id="adTitle">
                        <a href="" target=_top>Online Travel Insurance - Free Trip Info</a>
                  </span>
                  <span id="adDescription">
                        Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.
                  </span>
            </div>
            <div id="spacer">&nbsp;</div>
            <div id="ad">
                  <span id="adTitle">
                        <a href="" target=_top>Objects Pty Ltd</a>
                  </span>
                  <span id="adDescription">
                        For all your Java needs.
                  </span>
            </div>
      </div>

</body>
</html>
0
objects
Asked:
objects
  • 6
  • 5
1 Solution
 
GrandSchtroumpfCommented:
Vertical centering is not supported by divs.  IMHO, the best way to acheive vertical centering is to use a table.
There are other ways with css only but they are very messy and usually use negative margins and that's a very bad idea.
Otherwise, you can use javascript... not my favorite either.

Note that if you don't need IE6 support, you can use the css "display: table" and "vertical-align: middle" which is equivalent to using an html table.
0
 
objectsAuthor Commented:
Thanks for that, so if we ignore the centring for the moment what controls the height of the internal divs?
And how would you force them to be contained within the containing div (truncating the text if box too small).
0
 
GrandSchtroumpfCommented:
just add this css rule:

     div#ads
     {
          overflow: hidden;
     }
0
Industry Leaders: 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!

 
objectsAuthor Commented:
I added that but it made no difference.
Here's my current code (thanks to your excellent answer in my previous question) with a fixed height specified for the container

The container only has the specified height in Firefox (but the nested divs extends outside the container), and in IE the container has expanded to fit all the nested div's

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<body>
<style type="text/css">

     div#ads
     {
          width: 500px;
          height: 60px;
          background-color: #99ff99;
          padding: 10px;
          border: 1px solid #999999;
     }

     div#ads div
     {
          float: left;
          margin-right: 2px;
          width: 150px;
          text-align: center;
          background-color: #f5f5f5;
          border: 1px solid #999999;
          overflow: hidden;
     }

     div#ads h2
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          font-weight: bold;
          text-decoration: underline;
          color: #336699;
          margin: 0;
     }

     div#ads p
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          margin: 0;
     }

</style>

<body>

     <div id="ads">
          <div>
               <h2>
                    <a href="" target="_top">Compare Travel Insurance</a>
               </h2>
               <p>
                    Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Online Travel Insurance - Free Trip Info</a>
               </h2>
               <p>
                    Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Objects Pty Ltd</a>
               </h2>
               <p>
                    For all your Java needs.
               </p>
          </div>
     </div>

</body>
</html>
0
 
GrandSchtroumpfCommented:
you have set the "overflow: hidden;" on "div#ads div" instead of "div#ads"...
and actually, that's probably what you want to do (i guess you want to keep the bottom green border).  if so, you just need to specify the height of the "div#ads div":


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">

     div#ads
     {
          width: 500px;
          height: 60px;
          background-color: #99ff99;
          padding: 10px;
          border: 1px solid #999999;
     }

     div#ads div
     {
          float: left;
          margin-right: 2px;
          width: 150px;
          text-align: center;
          background-color: #f5f5f5;
          border: 1px solid #999999;
          height: 60px;
          overflow: hidden;
     }

     div#ads h2
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          font-weight: bold;
          text-decoration: underline;
          color: #336699;
          margin: 0;
     }

     div#ads p
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          margin: 0;
     }

</style>
</head>

<body>

     <div id="ads">
          <div>
               <h2>
                    <a href="" target="_top">Compare Travel Insurance</a>
               </h2>
               <p>
                    Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Online Travel Insurance - Free Trip Info</a>
               </h2>
               <p>
                    Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Objects Pty Ltd</a>
               </h2>
               <p>
                    For all your Java needs.
               </p>
          </div>
     </div>

</body>
</html>
0
 
objectsAuthor Commented:
Problem is that I don't want the inner div's to be fixed height, what I really want is for them to be sized to be as big as required but only up to a certain maximum height.

I've actually got a version that displays as I require under Firefox, but it displays incorrectly under IE.
I'll post that in a sec (if you're not sick of guiding me thru this yet).
0
 
GrandSchtroumpfCommented:
Is this better?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">

     div.AdsContainer
     {
          width: 500px;
          background-color: #99ff99;
          padding: 10px;
          border: 1px solid #999999;
     }

     div#ads
     {
          height: 60px;
          overflow: hidden;
     }

     div#ads div
     {
          float: left;
          margin-right: 2px;
          width: 150px;
          text-align: center;
          background-color: #f5f5f5;
          border: 1px solid #999999;
     }

     div#ads h2
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          font-weight: bold;
          text-decoration: underline;
          color: #336699;
          margin: 0;
     }

     div#ads p
     {
          font-family: arial, sans-serif;
          font-size: 11px;
          margin: 0;
     }

</style>
</head>

<body>

     <div class="AdsContainer">
     <div id="ads">
          <div>
               <h2>
                    <a href="" target="_top">Compare Travel Insurance</a>
               </h2>
               <p>
                    Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Online Travel Insurance - Free Trip Info</a>
               </h2>
               <p>
                    Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.
               </p>
          </div>
          <div>
               <h2>
                    <a href="" target="_top">Objects Pty Ltd</a>
               </h2>
               <p>
                    For all your Java needs.
               </p>
          </div>
     </div>
     </div>

</body>
</html>
0
 
objectsAuthor Commented:
Much better :)  great work.

Only problems I can still see with that is:
1. its losing the bottom border of the nested div's that overflow.
2. i still need to work out how to center align the boxes vertically.

For the centre aligning should I be able to take that code and insert each div into a table to achieve the alignment? I was reading that inline elements can be vertically aligned, so does this mean other elements can be used
0
 
GrandSchtroumpfCommented:
> 1. its losing the bottom border of the nested div's that overflow.
not much you can do about that.
you either set the border on the content or on the viewport.  if you set it on the content, then the bottom border will be cropped when the content is cropped.  if you set it on the viewport, then the height will not adjust to the height of the content.

> I was reading that inline elements can be vertically aligned
Vertical alignment of inline elements is relative to the line.  It can be baseline, top, bottom, super ,...  it has nothing to do with aligning a block inside its container.


Here is the code with vertical centering and with borders and backgrounds on both viewport and content (remove the one you don't want).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Ads</title>
<style type="text/css">

div#ads {
  font-family: arial, sans-serif;
  font-size: 11px;
  font-size: x-small; /* better for testing in IE */
  width: 500px;
  background-color: #99ff99;
  padding: 10px;
  border: 1px solid #999999;
  height: 60px;
}

div#ads div.AdItem {
  float: left;
  width: 150px;
  margin-right: 2px;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #999999;
  height: 100%;
  overflow: hidden;
}

div#ads table {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

div#ads h2 {
  font-size: 100%;
  font-weight: bold;
  margin: 0;
}

div#ads h2 a {
  text-decoration: underline;
  color: #336699;
}

div#ads p {
  margin: 0;
}

/* border and background on the content */
div#ads h2,
div#ads p {
  border: 1px solid red;
  background-color: lightblue;
}
div#ads h2 {
  border-bottom: none;
}
div#ads p {
  border-top: none;
}

</style>
</head>

<body>

<div id="ads">

<div class="AdItem">
<table cellspacing="0"><tr><td>
<h2><a href="" target="_top">Compare Travel Insurance</a></h2>
<p>Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.</p>
</td></tr></table>
</div>

<div class="AdItem">
<table cellspacing="0"><tr><td>
<h2><a href="" target="_top">Online Travel Insurance - Free Trip Info</a></h2>
<p>Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.</p>
</td></tr></table>
</div>

<div class="AdItem">
<table cellspacing="0"><tr><td>
<h2><a href="" target="_top">Objects Pty Ltd</a></h2>
<p>For all your Java needs.</p>
</td></tr></table>
</div>

</div>

</body>
</html>
0
 
objectsAuthor Commented:
Above and beyond the call of duty :)

Thank you so much for your help.
0
 
GrandSchtroumpfCommented:
i'm glad i could help.
<:°)
0

Featured Post

Independent Software Vendors: 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!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now