[RESOLVED] DIV not expanding

**lkeeney** · 12-09-2010 02:02 PM

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?

**Big O(1)** · 12-09-2010 02:41 PM

you will have to be more specific. Which div gets those style rules? Which div are you adding text to?

**lkeeney** · 12-09-2010 02:55 PM

Originally Posted by Big O(1)

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.

**Excavatorak** · 12-09-2010 02:55 PM

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.

**lkeeney** · 12-09-2010 03:08 PM

Originally Posted by Excavatorak

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.

**Excavatorak** · 12-09-2010 07:50 PM

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.

**lkeeney** · 12-09-2010 11:25 PM

Originally Posted by Excavatorak

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.

**lkeeney** · 12-10-2010 01:39 PM

Excavatorak,

Thank you again. This worked out great.

Thread: [RESOLVED] DIV not expanding

Thread Tools

Display

[RESOLVED] DIV not expanding

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions