Re: [css-d] Container Height Issue on Dynamic Page

[Big Moxy]

Chris,

You need a height:100% in several places. My css definitions start with 
this. Of course, font, background, etc varies by site. For an example go 
to www.pro-web-marketing.com and click on one of the top nav bar links. 
You will see that the right menu extends to the bottom of the content 
Ignore the content, the site owner hasn't updated it yet. One other 
thing... don't adopt the divname, divnamePad approach that is used here. 
I've been advised it's bad practice.

For you then add the height:100% to any div definition that must extend 
the length of the page.

HTH,
Tim

body {
background-color: #FF;
color : #00;
font-family : Arial, Helvetica, sans-serif;
height: 100%;
font-size: 85%;
}
#pageDef {
width: 810px;
height: 100%;
background-color: #FF;
margin-left: auto;
margin-right: auto;
}
* html #pageDef {
height: 100%;
}
html {
height: 100%;
}
#rightMenu {
margin: 0;
padding: 0;
width: 200px;
float: right;
top: 0;
border: none;
background-color: #D8D8D8;
height: 100%;
min-height: 100%;
border-top: 0;
}
#rightMenuPad {
margin: 0 0 0 10px;
padding: 0;
height: 100%;
min-height: 100%;
}

#content {
font-size: 100%;
text-align: justify;
margin: 0;
padding: 0;
top: 0;
height: 100%;
float: left;
width: 800px;
border-left-color:#D8D8D8;
border-left-style:solid;
border-left-width:5px;
border-right-color:#D8D8D8;
border-right-style:solid;
border-right-width:5px;
}
#contentPad {
font-size: 100%;
text-align: justify;
margin: 0;
padding: 0;
top: 0;
height: 100%;
}


Chris Akins wrote:
> Hello all experts and novices.  :-)
>
> Page with issue and CSS:
>
> http://www.springfieldmo.gov/cityconnect/getPost.jsp?entryid=6
> http://www.springfieldmo.gov/css/cityconnect.css
>
> Having worked through many CSS issues thinking my blog-type site was ready I
> just discovered today that on pages with shorter blog postings (via the
> above link), the #container div on my page isn't extending around both the
> major divs that are within it.
>
> Neither the #stories div or the #nav div are floated so I was expecting the
> #container to, well, contain them.  Is the problem partly due to the data
> being dynamically generated?
>
> I have the content somewhat source ordered so as to see the main content
> first.  But I also tried putting the #nav first, thinking its taller height
> would then force the #container to expand.  What am I missing?
>
> One possible solution I haven't yet tried is to put a footer at the bottom
> of the page.  But doing that still doesn't give me an answer as to why the
> page isn't working as expected.
>
> Any help would be much appreciated.
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Thanks for the tip, but unfortunately, declaring height:100% doesn't work
for me.  I tried putting it on body, #stories, #container and nothing.
I've realized that it's my #nav that's absolutely positioned within the
#container that is the problem apparently.  But I'm not sure what to do to
fix it.  I structured the page this way in order to source order my content
first.

I have since tried taking the absolute positioning off, instead using a wide
left margin on the #nav and negative margin on the top of it to pull it up
beside the other.  That works as long as there is no text resizing.  Even
with pixel based margins, the #nav moves around greatly when text resizing.

Is there a way to keep my html ordered the way it is, and NOT use floats,
and still end up with a #container that contains BOTH of the things inside
it?

Chris


On Jan 15, 2008 11:40 AM, Big Moxy <[EMAIL PROTECTED]> wrote:

> Chris,
>
> You need a height:100% in several places.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Gunlaug Sørtun]

Chris Akins wrote:

> Is there a way to keep my html ordered the way it is, and NOT use
> floats, and still end up with a #container that contains BOTH of the
> things inside it?

Don't think so - if the appearance should otherwise stay intact.

What's wrong with using floats in your case?
Turns out ok, IMO...


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Nothing, I guess. But now that I've put the floats in, I'm getting no
spacing between #stories and #nav on IE6.  Firefox and Safari show it
correctly (or as intended anyway).  This page actually started being built
over a year ago, and I had tried floats.  Now I remember why I then went to
positioned elements.  Beause of this difference in spacing.

I don't yet have IE7, so I don't know what it's doing in that browser.

Any thoughts?

On Jan 15, 2008 8:52 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:


> What's wrong with using floats in your case?
> Turns out ok, IMO...
> 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Gunlaug Sørtun]

Chris Akins wrote:
> Nothing, I guess. But now that I've put the floats in, I'm getting no
>  spacing between #stories and #nav on IE6.  Firefox and Safari show 
> it correctly (or as intended anyway).  This page actually started 
> being built over a year ago, and I had tried floats.  Now I remember 
> why I then went to positioned elements.  Beause of this difference in
> spacing.

You're experiencing the 'margin-doubling on floats' bug in IE6.

Look once more at my example - in IE6...
>> 
...and see that there's no spacing problem. That's because I "killed"
the 'margin-doubling' bug by declaring 'display: inline' on #stories.
Floats can't 'display: inline' so it is a nonsensical declaration, but
it fixes the bug in IE6.

> I don't yet have IE7, so I don't know what it's doing in that 
> browser.

Can't see any problems in IE7.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Wow - that's perfect!  I had to put the declaration on both of the floated
divs, not just one, in order for it to be fixed in my IE6.  But that's
swell!  Thanks.  :-)

So, in order to turn this into a learning process, had these divs had
margins on more than just the one side, would they all have gotten doubled?
Does this always happen in IE6 with floated items that have margins?  Or is
it just when there are more than one floated item?



> You're experiencing the 'margin-doubling on floats' bug in IE6.
>
> Look once more at my example - in IE6...
> >> 
> ...and see that there's no spacing problem. That's because I "killed"
> the 'margin-doubling' bug by declaring 'display: inline' on #stories.
> Floats can't 'display: inline' so it is a nonsensical declaration, but
> it fixes the bug in IE6.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Gunlaug Sørtun]

Chris Akins wrote:
> Wow - that's perfect!  I had to put the declaration on both of the
> floated divs, not just one, in order for it to be fixed in my IE6.
> But that's swell!  Thanks.  :-)

I had the fix on both floats in my example too - they're in the CSS, but
forgot to mention the second one in my last reply :-)

> So, in order to turn this into a learning process, had these divs had
>  margins on more than just the one side, would they all have gotten
> doubled? Does this always happen in IE6 with floated items that have
> margins?  Or is it just when there are more than one floated item?

It's the _front-side_ margin that gets doubled on floats in IE6 and
older win versions, and the _front-side_ is "left" on a 'float: left'
and "right" on a 'float: right'.

For more about this bug and the fix, see:


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/