Lengthen outer element to bottom of float 1

[chessbot]

Hey all!

Here is a portion of my code:

<div id="calendar">
 <div class="month">
  <h3>January</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>
 </div>
 <div class="month">
  <h3>February</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>
 </div>
 <!-- etc. etc. etc. -->
</div>

and styles:

#calendar {
	border: 1px solid black;
	background-color: #CCCCCC;
	height: 621px; /* I don't want this to be necessary */
	}

#calendar .month {
	margin: 10px;
	border: 1px solid black;
	height: 175px;
	width: 200px;
	float: left;
	overflow: auto;
	background-color: white;
	}

#calendar .month h3 {
	margin: 0;
	width: 100%;
	border-bottom: 1px solid black;
	color: white;
	background-color: #888888;
	text-align: center;
	}

#calendar .month .content {
	margin: 0;
	padding: 5px;
	}

This mostly comes out how I intend, except that I have to specify the outer div's height (#calendar) or else it will default to 0 as if the floated elements were not contained inside it. Is there any way to default its length to enclose all of the floated elements?

Thanks!

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

 

[dkdude]

In stead of setting the with try adding
[tt]float : left;[/tt]
... or ...
[tt]float : right;[/tt]

Hope this fit in your design

Best Regards


Jakob

 

[chessbot]

Not sure exactly what you mean, but thanks for giving me an idea (if tis is what you meant):

#calendar {
    border: 1px solid black;
    background-color: #CCCCCC;
    float: left;
    }

works.

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

 

[dkdude]

Exactly - glad to be of help


Jakob

 

[Vragabond]

Actually, the really proper way to do it, would be putting a spacer div at the bottom of floated elements. Floated elements are taken out of document flow and as such do not contribute to the overall height of the parent. If you add an element which clears floats, that element will be in normal flow and be positioned below the floated elements. Thus, you get your height. Like so:

<div id="calendar">
 <div class="month">
  <h3>January</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>
 </div>
 <div class="month">
  <h3>February</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>
 </div>
 [b]<div style="clear: both; height: 0; margin: 0;"></div>[/b]
 <!-- etc. etc. etc. -->
</div>

You should move the stuff to the stylesheet though.

 

[philote]

There is also an alternative to Vragabond's method as described here:

http://www.positioniseverything.net/easyclearing.html

It's a little more complex but doesn't involve changing your html, only your style sheet.