dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Nested divs not expand to 100%

  1. #1
    Join Date
    Jan 2015
    Posts
    17

    Nested divs not expand to 100%

    I can't find a definitive answer for getting the content div and left nave div to expand 100% of the container

    Left nav does at the moment but with more content it won't?

    Can anyone help? Code below.

    CSS
    PHP Code:
    .container {
        
    width:90%;
        
    background-color:#CCC;
        
    max-height:inherit;
    }
    .
    header {
        
    width:100%;
        
    height:80px;
        
    background-color:#900;    
    }
    .
    left_nav {
        
    heightauto;
        
    float:left;
        
    width:150px;
        
    background-color:#999;
    }
    .
    content {
        
    width100%;
        
    background-color:#CCC;
    }

    .
    footer {
        
    width100%;
        
    height:25px;
        
    float:right;
        
    background-color:#333;

    HTML
    PHP Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="styles/style.css">
    <title>Title</title>
    </head>
    <body>
        <div class="container">
            <div class="header">
            <?php include('includes/header.php'); ?>
            </div>
            <div class="left_nav">
            <?php include('includes/left_nav.php'); ?>
            </div>
            <div class="content">
            <?php include('includes/homepage_cont.php'); ?>
            </div>
            <div class="footer">
            <?php include('includes/footer.php'); ?>
            </div>
        </div>
    </body>
    </html>
    I tried using the obvious height 100% though not effective.

  2. #2
    Join Date
    Mar 2012
    Posts
    2,095
    Height:100% does not work if the parent does not have a height declared. So try:

    body,container,left_nav,content {
    height:100%;
    }

    Note:

    1. You do not need "container". Remove it from the HTML, and style "body" instead.

    2. "header", "left_nav", "content" and "footer" should be IDs not CLASSes, because there should be only one of each per page.

    3. You should call the nav div according to its function not its placement. E.g. "nav" or "main_nav" etc., not "left_nav". Why? Because you may restyle the page to place on the right, or full width on a mobile display!

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