www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] DIV not expanding

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

    resolved [RESOLVED] DIV not expanding

    I have a web page that contains a DIV ID= "page". Within this page I have a DIV ID="content".

    I have these two statements in my CSS file listed in the page code:
    "min-height: 300px; background-color: #c5d0ff;"

    When I add a lot of text the page DIV increases in height as shown by the Web Diveloper Toolbar as the text increases. However, the background color does not increase beyond the min-height of 300px.

    What am I doing wrong?
    Larry

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    you will have to be more specific. Which div gets those style rules? Which div are you adding text to?

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Quote Originally Posted by Big O(1) View Post
    you will have to be more specific. Which div gets those style rules? Which div are you adding text to?
    Here is the portion of my CSS file:

    Code:
    #page  {
       position: relative;
       min-height: 760px;
       width: 960px;
       background-color: #c5d0ff;
       margin-left: auto;
       margin-right: auto;
       margin-top: 0px;
       margin-bottom: 0px;
    }
    The text is placed in the content DIV on the web page. Here is a snippet of the code from the shtml page.

    Code:
    <body>
     <div id="page">
     <div id="banner2"><img src="../images/banner2.jpg" alt="banner" /></div>
    
     <div id="navigation"><!--#include virtual="../includes/nav2.html" --></div>
     <div ID="header"><h1>- About Us -</h1></div>
     <div id="content">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget libero quam, in faucibus orci. Vestibulum aliquam
    Although the CSS code shows a min-height of 760px;, I have changed this to different lower values and the background only fills the min-height figure.
    Last edited by lkeeney; 12-09-2010 at 02:58 PM.
    Larry

  4. #4
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Hello lkeeney,
    Post your full code here. There is more affecting your site than the little bit of info you've provided us here.
    Even better would be a link to the test site so we can see it in action.

    If I had to bet I would say you are not using a DocType. See the link about DocTypes in my signature line... in fact, have a look at every link in my signature line.
    Last edited by Excavatorak; 12-09-2010 at 03:14 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  5. #5
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Quote Originally Posted by Excavatorak View Post
    Hello lkeeney,
    Post your full code here. There is more affecting your site than the little bit of info you've provided us here.
    Even better would be a link to the test site so we can see it in action.
    Here is a link to the page: http://www.blackcanyonsystems.com/we...tHealthy/test/

    If you check with the Web Developer Toolbar, you will see the Page Div completely encloses the text, but the background color does not fill the Page DIV.
    Larry

  6. #6
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Yes, WebDeveloperToolbar may not be the best tool to use for debugging HTML/CSS. FireBug is much better. [edit - I just checked in WDT and it does not show the #page wrapping all the contents of your site. IE8 and the latest WDT here]
    It's your absolutely positioned #content. AP takes that element out of the normal flow of the document so, when #page doesn't even see #content, the color stops at the bottom of #navigation.

    Try making your CSS look like this -
    Code:
    /*  Main 2 Style Sheet for Cube It Healthy
        Design by Lawrence Keeney - Black Canyon Systems LLC*/
    
    html, body {
       background: #32604C;
       height: 100&#37;;
    margin : 0;
    }
    #page  {
       min-height: 500px;
       width: 960px;
    margin: 0 auto;
       position: relative;
       background: #c5d0ff;
    }
    #navigation {
      width: 220px;
    float: left;
    margin: 25px 0 0 5px;
    }
    #header{
      text-align: center;
      color: #019a49;
    }
    #content  {
    margin: 0 0 0 250px;
    padding: 0 20px;
    }
    
    p{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #111;}
    That's based on this method of a simple 2-column layout.
    Last edited by Excavatorak; 12-09-2010 at 07:55 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Quote Originally Posted by Excavatorak View Post
    Yes, WebDeveloperToolbar may not be the best tool to use for debugging HTML/CSS. FireBug is much better. [edit - I just checked in WDT and it does not show the #page wrapping all the contents of your site. IE8 and the latest WDT here]
    It's your absolutely positioned #content. AP takes that element out of the normal flow of the document so, when #page doesn't even see #content, the color stops at the bottom of #navigation.

    Try making your CSS look like this -
    Code:
    /*  Main 2 Style Sheet for Cube It Healthy
        Design by Lawrence Keeney - Black Canyon Systems LLC*/
    
    html, body {
       background: #32604C;
       height: 100%;
    margin : 0;
    }
    #page  {
       min-height: 500px;
       width: 960px;
    margin: 0 auto;
       position: relative;
       background: #c5d0ff;
    }
    #navigation {
      width: 220px;
    float: left;
    margin: 25px 0 0 5px;
    }
    #header{
      text-align: center;
      color: #019a49;
    }
    #content  {
    margin: 0 0 0 250px;
    padding: 0 20px;
    }
    
    p{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #111;}
    That's based on this method of a simple 2-column layout.
    Thank you. I am going to try this when I get to the office tomorrow.
    Larry

  8. #8
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Excavatorak,

    Thank you again. This worked out great.
    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