2

I cannot get auto height to work for FF or Chrome. It works fine in IE but in FF and Chrome it basically makes the height of the div as much as the page itself, even when the content does not fill the element. It will just leave a huge blank area under the actual content. 

<center>
    <div id = "choosearea">
        <div id = "logbar">
            <div id = "logbartext">Choose Your Area
            </div>
        <div id = "log">
          <a href = "?action=home">Home</a>   
          <a href = "?action=logout&NOHEADERS=1">Log Out</a>
        </div>
    </div>
    <div id = "header">
        <div id = "ss_logo">
          <img src="http://i1157.photobucket.com/albums/p595/Gamethefirst/ssnewbanner1.png">
        </div>
        <div id = "area">Serving:<br><u>SouthWest Ohio<br>Northern Kentucky<br>SouthEast Indiana</u>
        </div>  
    </div>
 <center>
    <div id = "menu">
    </div>
 </center>
    <div width = "100%" align = "center">
      <div id = "paddingbox">
        <div id = "chooseareatext">
          <p>Choose the area which you reside from the options below in order to post/view your ad.</p>
          <ul class = "bullets">
           <li><a href = "?board=swohio">SouthWest Ohio</a></li>
           <li><a href = "?board=nk">Northern Kentucky</a></li>
           <li><a href = "?board=indi">SouthEast Indiana</a></li>
          </ul>
        </div>
        <div id = "affs">
          <h3>Need Supplies? Get Great Deals From Our Friends!</h3>
        </div>
      </div>
    </div>
  </div>
</center>

StyleSheet

#choosearea {
    height: auto;
}

Here is an example: http://skillswap.boards.net/index.cgi?board=postad

Captain Obvlious
  • 19,754
  • 5
  • 44
  • 74
Shawn GameForreal
  • 76
  • 9
  • For any future questions, try to use the tags on the question to denote the technology that the problem is in. I suspect most people did not see the question as the only tag was `auto`, rather than `css` as well – andyb Sep 13 '12 at 13:42

2 Answers2

1

CSS height default value is auto. It is the height:100% on #paddingbox that is causing that <div> to be very long, creating the large area of whitespace on FF and Chrome. Removing that should solve the problem.

Also, some of the markup in your example is either invalid or deprecated in the newer versions of the HTML specifications.

For example width="100%" is not a valid attribute. To apply an inline style, the correct syntax is <div style="width:100%">

The <center> tag and the align="center" attribute have also been deprecated since HTML 4.01 and do not exist in HTML 5 where instead the recommended approach is to use CSS to add presentational aspects to the markup with margin:0 auto and text-align:center for example. See Why is the <center> tag deprecated in HTML? for more detail on this. Since there is already a stylesheet in the question, it might help to separatr the content (HTML) and presentation (CSS) - http://www.alistapart.com/articles/separationdilemma/

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
0

Write this in body style:

position: absolute;
Mahdi
  • 57
  • 1
  • 2