div question..

ChicoMendez

hi


ive got a div on my page

<div id="categorybox">
   	<img src='nothumb.jpg' align='left' hspace='4' border='0'/>   <h2>TITLE</h2>
  
    <p>text  </p><div>
	<a class="r1" href=''>5 Options</a><strong class="ar">&nbsp;&#187;</strong>&nbsp;&nbsp;
    <a class="r1" href=''>2  Sub Categories</a><strong class="ar">&nbsp;&#187;</strong>
  </div>

i would like the div to resize depending on the text that is in the div.

I have tryed specifying height (only works of there is not too much text in there as otherwise it overflows)

#categorybox {
  background:#eee;
  padding:9px;
  border:1px solid #ccc;
  color:#333;
  width: 90%;
  margin-bottom:10px;
   margin-top:10px;
   height:130px;
  }

i have also tryed without height (but it does not make a difference)

#categorybox {
  background:#eee;
  padding:9px;
  border:1px solid #ccc;
  color:#333;
  width: 90%;
  margin-bottom:10px;
   margin-top:10px;
   height:130px;
  }

therefore how to i tell the div to take the height depending on the content of the div?

Thank you

smcelhinney

What about setting height to 100%

As in

#categorybox {
  background:#eee;
  padding:9px;
  border:1px solid #ccc;
  color:#333;
  width: 90%;
  height: 100%
  margin-bottom:10px;
   margin-top:10px;
   height:130px;
  }

Also, not good idea to mix quotes in attribute calls, eg. use " (double-quote) or ' (single-quote), not both. This doesnt make a difference to your style definition, but its easier to read code if its consistent.

Plus single-quotes are not XHTML compliant AFAIK.

Thanks
Stephen

ChicoMendez

height:100%;

this actually distorts the whole page... i dont want the div to be 100% of the page height i just want it to contain everything that is actuall in it!


My problem is that when the div has enough text to drop bellow the image its ok... (the div seems only to be taking the text to set its height)
see imageissue2.jpg


Wheras see imageissue1.jpg for my problem??

Do i have to apply a certain style to my img??

Tnx

canker

try setting overflow to visible like this

#categorybox {
  background:#eee;
  padding:9px;
  border:1px solid #ccc;
  color:#333;
  width: 90%;
  height: 100%
  margin-bottom:10px;
  margin-top:10px;
  height:0px;
  overflow:visible;
  }

Serbian

You need to use the Prop-Clear CSS hack to fix this.

mewso

Would height: auto; work?