/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] DIV not expanding

Copy linkTweet thisAlerts:
Dec 09.2010

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?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Big_O_1_Dec 09.2010 — you will have to be more specific. Which div gets those style rules? Which div are you adding text to?
Copy linkTweet thisAlerts:
@lkeeneyauthorDec 09.2010 — you will have to be more specific. Which div gets those style rules? Which div are you adding text to?[/QUOTE]

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;
}
[/CODE]

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
[/CODE]

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.
Copy linkTweet thisAlerts:
@ExcavatorakDec 09.2010 — 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.
Copy linkTweet thisAlerts:
@lkeeneyauthorDec 09.2010 — 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.[/QUOTE]

Here is a link to the page: http://www.blackcanyonsystems.com/web/CubeItHealthy/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.
Copy linkTweet thisAlerts:
@ExcavatorakDec 10.2010 — Yes, WebDeveloperToolbar may not be the best tool to use for debugging HTML/CSS. FireBug is [I]much[/I] better. [edit - I just checked in WDT and it does [I]not[/I] 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;}


[/CODE]

That's based on this method of a simple 2-column layout.
Copy linkTweet thisAlerts:
@lkeeneyauthorDec 10.2010 — Yes, WebDeveloperToolbar may not be the best tool to use for debugging HTML/CSS. FireBug is [I]much[/I] better. [edit - I just checked in WDT and it does [I]not[/I] 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;}


[/CODE]

That's based on this method of a simple 2-column layout.[/QUOTE]

Thank you. I am going to try this when I get to the office tomorrow.
Copy linkTweet thisAlerts:
@lkeeneyauthorDec 10.2010 — Excavatorak,

Thank you again. This worked out great.
×

Success!

Help @lkeeney spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...