CODEWITHSUNDEEP
javascriptjquerycss
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

change height of div based on elements within it

Basically IF div.PageheaderDescription contains NO img and NO div#cat-text then i want the height to be 0px so there isnt a white space.

Here is my css:

.PageHeaderDescription {
    height: 320px;
    position: relative;
    width: 99%;
}

This is the CSS path:

html body div#Container div#Content div.PageHeaderDescription

Below is the HTML

<div class="PageHeaderDescription">
    <img border="0" src="images/Category/large/22.png" class="c1" />

    <div id="cat-text" class="c2">
      <table>
        <tbody>
          <tr>
            <td>
              <h1>1 Person</h1>
            </td>

            <td><span>test</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Is using jquery the best way or could i use clear:both some how? Could you help me, i am not sure how to check for elements in a div using jquery. I know contains works for string values?

Upvotes: 0

Views: 424

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87083

You can use css height: auto

div.PageHeaderDescription {height: auto}

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Well, you could use the :empty selector in CSS:

.PageHeaderDescription:empty {display: none;}

Upvotes: 1

Jan Hančič
Jan Hančič

Reputation: 53929

Why don't you just set "max-height" to 320px. That way the div will default to 0 height, but will expand to max 320px height if necessary.

Upvotes: 2

Related Questions