[Solved] Div Sizing Issue

  • # April 27, 2010 at 3:50 pm

    i may not be asking this question correctly, since i am a beginner.

    in this css-only accordion example, everything works right (ignore overflow issue for the moment):

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    CSS-Only Accordion Effect: Vertical Accordian


    Spring begins in the northern hemisphere around the months of March, April, May, or as reckoned astronomically extending from the vernal equinox. As in summer, the axis of the Earth is tilted toward the Sun and the length of daylight rapidly increases. The northern hemisphere begins to warm significantly causing new plant growth to “spring forth,” giving the season its name. Snow begins to melt and streams swell with runoff and spring rains. Most flowering plants bloom this time of year, in a long succession sometimes beginning even when snow is still on the ground, and continuing into early summer. In normally snowless areas “spring” may begin as early as February during warmer years, with subtropical areas having very subtle differences, and tropical ones none at all. Subarctic areas may not experience “spring” at all until May or even June, or December in the outer Antarctic.

    Severe weather most often occurs during the spring, when warm air begins to invade from lower latitudes while cold air is still pushing from the polar regions. Flooding is also most common in and near mountainous areas during this time of year because of snowmelt, many times accelerated by warm rains. In the United States, Tornado Alley is most active by far this time of year, especially since the Rocky Mountains prevent the surging hot and cold air masses from spreading eastward and instead force them directly at each other. Besides tornadoes, supercell thunderstorms can also produce dangerously large hail and very high winds, for which a severe thunderstorm warning or tornado warning is usually issued. Even more so than winter, the jet streams play an important role in severe weather in the springtime.


    The seasons are considered by some Western countries to start at the equinoxes and solstices, based on astronomical reckoning. In North American-printed English-language calendars, based on astronomy, summer begins on the day of the summer solstice and ends on the day of the autumn equinox. When it is summer in the Southern Hemisphere, it is winter in the Northern Hemisphere, and vice versa.

    But, because the seasonal lag is less than 1/8 of a year (except near large bodies of water), the meteorological start of the season, which is based on average temperature patterns, precedes by about three weeks the start of the astronomical season. According to meteorology, summer is the whole months of December, January, and February in the Southern Hemisphere, and the whole months of June, July, and August in the Northern Hemisphere. This meteorological definition of summer also aligns with commonly viewed notion of summer as the season with the longest (and warmest) days of the year, in which the daylight predominates, through varying degrees. The use of astronomical beginning of the seasons means that spring and summer have an almost equal pattern of the length of the days, with spring lengthening from the equinox to the solstice and summer shortening from the solstice to the equinox, while meteorological summer encompasses the build up to the longest day and decline thereafter, so that summer has many more hours of daylight than spring.

    Today, the meteorological reckoning of the seasons is used in Australia, Denmark, the former USSR and by many people in the United Kingdom, but the astronomical definition is still more frequently used in the United States.


    Autumn (also known as fall in North American English) is one of the four temperate seasons. Autumn marks the transition from summer into winter. In the northern hemisphere, the start of autumn is generally considered to be around September, and in the southern hemisphere, its beginning is considered to be around March. There exist, however, different definitions of autumn, some of which are based on the months of the year while others are based on the equinox and solstice.

    During autumn, deciduous trees shed their leaves. Leaves change to a yellowish, reddish or brownish hue before falling. Such coloured leaves have come to be colloquially called “fall foliage” in North America. In temperate zones, autumn is the season during which most crops are harvested. It is also the season during which days get shorter and cooler and the nights get longer.


    Winter is one of the four seasons of temperate zones. North American calendars go by astronomy and state that winter begins on the winter solstice and ends on the vernal equinox. Calculated meteorologically, it begins and ends earlier (typically at the start of the month with the equinox or solstice) and is the season with the shortest days and the lowest temperatures. Either way, it generally has cold weather and, especially in the higher latitudes or altitudes, snow and ice. The coldest average temperatures of the season are typically experienced in January in the Northern Hemisphere and in July in the Southern Hemisphere.

    more stuff

    (adapted from http://www.cssnewbie.com/css-only-accordion/)

    So, now i want the div’s to size to fit their contents. To achieve that, i use display:inline, as described [url="http://www.webmaster-talk.com/html-forum/58554-make-div-fit-its-contents.html"%5Dhere%5B/url%5D. I simply uncomment the display:inline style, in the hover style above. That works– the divs expand to fit the content.

    Problem now is that the background color is lost.

    i also notice some instability in the hover behavior after adding the "display:inline" mentioned above.

    Any suggestions on how to keep the background color, OR an alternate way to fit the divs to content, OR an alternate tag to use instead of ‘div’, OR an alternate CSS-only hover accordion?

    re fitting to contents, i have seen mention of putting a "clear:both" div after each of my divs, but have not had success with that yet.


    # April 27, 2010 at 4:57 pm

    Change to this
    #accordion div:hover {
    height: 100%;

    # April 27, 2010 at 6:06 pm

    that’s it!


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed