www.webdeveloper.com
Results 1 to 2 of 2

Thread: box model auto height problem

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    201

    box model auto height problem

    I have a simple website but I am having problem with the main content area not expanding to fit the text I have placed there. Can someone tell me what I am missing?

    I know that the default for height is auto, but this did not work so I have added height: auto; to everything and it still doesn't work.

    You can see the website here: http://www.lawrence-nv.us/Mayra

    Here is the code:

    CSS
    Code:
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: black;
    }
    
    #main .container{
        background-color: #fff;
        height: auto;
    }
    
    .container {
        position: relative;
        width: 960px;
        margin: 0 auto;
        height: auto;
    }
    
    .container #header{
      position: relative;
      height: 100px;
      background-image:url('../images/banner.jpg');
    }
    
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    
    .container #menu{
      position: relative;
      height: 20px;
      background-color: blue;
    }
    
    ul#menu {
        list-style: none;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    
    ul#menu li a {
        font-size: 20px;
        color: #fff;
        text-decoration: none;
    }
    
    ul#menu li {
        float: left;
        padding-left: 30px;
        padding-right: 75px;
    }
    
    .container #content{
      position: relative;
      top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      clear:both;
      height: auto;
    }
    
    p{
      color: black;
      padding-bottom: 10px;
    }
    
    #footer{
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        background-color: #000;
    }
    
    #footer .container{
        background-color: white;
        padding-bottom: 5px;
        padding-top: 5px;
    
    }
    #footer .container p{
     text-align: center;
     color: blue;
    }
    HTML
    Code:
    <!doctype html>
    <html lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="Lawrence Keeney">
    <META NAME="keywords" CONTENT="Fashion Design, Makeup Artist, fashion, makeup, Las Vegas">
    <META NAME="description" CONTENT="Mayra Diaz Fashion Designer">
    <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="includes/style.css">
    <title>Mayra Designs</title>
    </head>
    
    <body>
    
        <div id="main">
        <div class="container">
             <div id="header">
             </div><!--end header -->
        <div id="menu">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Designs</a></li>
                <li><a href="#">Contact</a></li>
                <div style="clear:both"></div>
            </ul>
        </div><!--end menu -->
    
    <div id="content">
    
        <p>Consectetuer sociis leo egestas turpis mattis netus urna interdum eros. Tellus. Ac curabitur porttitor morbi
        sollicitudin ipsum pretium interdum sagittis, quam lacinia. Fames lorem dictum aliquet aliquam est sit amet
        platea consectetuer augue class velit dictum phasellus lorem hac egestas fringilla mus interdum nonummy est
        sociis morbi.</p>
    
        <p>Hendrerit Facilisi auctor mollis. Consectetuer. Torquent in, dapibus nisl vitae eu, urna dolor a magnis feugiat,
        orci sed semper quam lacinia nonummy. Nonummy taciti vivamus maecenas enim mauris Sodales duis.</p>
    
        <p>Convallis orci lobortis fusce in scelerisque libero rutrum massa fermentum phasellus primis bibendum. In
        Quisque consequat. Suscipit pretium mattis lorem sociosqu consequat phasellus.</p>
    
        <p>Consectetuer sociis leo egestas turpis mattis netus urna interdum eros. Tellus. Ac curabitur porttitor morbi
        sollicitudin ipsum pretium interdum sagittis, quam lacinia. Fames lorem dictum aliquet aliquam est sit amet
        platea consectetuer augue class velit dictum phasellus lorem hac egestas fringilla mus interdum nonummy est
        sociis morbi.</p>
    
        <p>Hendrerit Facilisi auctor mollis. Consectetuer. Torquent in, dapibus nisl vitae eu, urna dolor a magnis feugiat,
        orci sed semper quam lacinia nonummy. Nonummy taciti vivamus maecenas enim mauris Sodales duis.</p>
    
        <p>Convallis orci lobortis fusce in scelerisque libero rutrum massa fermentum phasellus primis bibendum. In
        Quisque consequat. Suscipit pretium mattis lorem sociosqu consequat phasellus.</p>
    
    </div><!--end content-->
    
             <div id="sidebar">
             </div><!--end sidebar-->
    
        </div><!--end main container-->
    </div><!--end main-->
    
    <div id="footer">
        <div class="container">
            <p>Copyright &#169; 2012 Lawrence - Creative Designs</p>
        </div><!--end footer container-->
    </div><!--end footer-->
    </body>
    </html>
    Last edited by lkeeney; 04-19-2012 at 12:33 PM.
    Larry

  2. #2
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    201

    Problem solved?

    I believe I have resolved my problem.
    Larry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles