[css-d] Div Height

[Robbert van Andel]

I recently updated my website, replacing a table with a div as the body of
the page.  I want this division to be at least the height of the screen but
also grow if content scrolls off the page.  In IE, the page renders fine,
but in FireFox, the division does not grow if the text scrolls beyond the
bottom of the screen.

 

An example page is http://www.swimoregon.org/AquaMaster/

 

The division's id is body and below is the relevant css

body {

height:100%;

padding:0;

margin:0px;

text-align:center;

background-color: #336EA8;

}

 

#body {

width: 649px;

min-height: 100%;

height: 100%;

border-left:4px solid #00;

border-right:4px solid #00;

padding-left:2px;

padding-right:2px;

background-color:#ff;

margin-left:auto;

margin-right:auto;



}

 

I'm constantly fighting with this set up and actually used a table on
another website to avoid this problem.  I would really like to figure out
how to do this with a division as I understand that tables are deprecated in
the use of layout.

 

Thank you,

Robbert van Andel

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Div height

[Abyss Information]

is there such a thing in css2 that allows for a min height of a div?

and then auto expand the height as more text is added?

thanks
abyss

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

[css-d] div height problem

[Kelly Moore]

I have a sub-section to my navigation tabs which looks fine in FF, but
is waaay to tall in IE.   any ideas?  am I doing something weird with
my divs?

here is a sample:

http://yakmaster.net/test/faq.html
__
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-d] DIV HEIGHT PROBLEM

[Mijin Vladimir]

I have a problem, how to display a left colum background image to the whole
width od left side, regardles mainpart length.

// HTML

 ... something ...
... something ... 
 ...


//CSS

#wrapper{
width:900px;
position: relative;
text-align:left;
height:100%;
margin: 0 auto;
padding:0px 0px 0px 0px;
background-color: #F2F4DC;
}

#left_side {
float:left;
width:190px;
height:100%;
background-image: url('../images/background_img.gif');
background-repeat:repeat-y;
}

#main_side {
float:left;
width:710px;
}

#footer {
clear: both;
height:20px;
color:white;
font-size:9pt;
background-color: #F38526;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div Height

[Gunlaug Sørtun]

Robbert van Andel wrote:
> I recently updated my website, replacing a table with a div as the 
> body of the page.  I want this division to be at least the height of 
> the screen but also grow if content scrolls off the page.  In IE, the
>  page renders fine, but in FireFox, the division does not grow if the
>  text scrolls beyond the bottom of the screen.

> http://www.swimoregon.org/AquaMaster/

> I'm constantly fighting with this set up and actually used a table on
>  another website to avoid this problem.  I would really like to 
> figure out how to do this with a division as I understand that tables
>  are deprecated in the use of layout.

The solution is to make divs behave/render like tables, by adding...

#body {display: table;}

...so they do expand with content as tables does. That's according to
CSS specs, so Firefox will do just fine with it.

IE/win doesn't understand 'display: table;' but IE6 and older versions
are saved by a bug called 'Layout'[1]. Don't know how IE7 will do
though, as it won't be up to standards and they have partially killed
that 'Layout' bug.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div Height

[Robbert van Andel]

That was it.

Thank you,
Robbert

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: Tuesday, February 21, 2006 6:23 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Div Height

Robbert van Andel wrote:
> I recently updated my website, replacing a table with a div as the 
> body of the page.  I want this division to be at least the height of 
> the screen but also grow if content scrolls off the page.  In IE, the
>  page renders fine, but in FireFox, the division does not grow if the
>  text scrolls beyond the bottom of the screen.

> http://www.swimoregon.org/AquaMaster/

> I'm constantly fighting with this set up and actually used a table on
>  another website to avoid this problem.  I would really like to 
> figure out how to do this with a division as I understand that tables
>  are deprecated in the use of layout.

The solution is to make divs behave/render like tables, by adding...

#body {display: table;}

...so they do expand with content as tables does. That's according to
CSS specs, so Firefox will do just fine with it.

IE/win doesn't understand 'display: table;' but IE6 and older versions
are saved by a bug called 'Layout'[1]. Don't know how IE7 will do
though, as it won't be up to standards and they have partially killed
that 'Layout' bug.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div height problem

[Marty Martin]

I am trying to adapt the solution found here:  
http://www.quirksmode.org/css/100percheight.html  but am running into 
some difficulty.  I have given  and  heights of 100% in my 
stylesheet.  When I give my container  a height of 100% 
though, it does not stretch the entire height of it's container .  I think maybe this is because my div#x03_03 has a style of 
float: left perhaps.  Can someone suggest a fix?  The problem can be 
seen here:  http://dev.lewisgaleclinic.com/index.cfm/fa/home.css.cfm and 
the container div I am referring to is the far right column that starts 
with "Physician's Opportunities...". 

Here is the code in question:

   
   
   Physician's Opportunities Guide
   
   A text 
description of this guide for physican's opportunities can go in this 
spot right hereread more
   
   
   
   
   In this issue... 
Prescription PainsHow to Stay 
Stress-Free


And the relevant styles:
html, body {
   height: 100%;
}
div#x03_03 {
   width: 200px;
   background-color: #FDF8EA;
   margin: 0;
   padding: 0;
   float: left;
   height: 100%;
}
div#x03_03_01 {
   padding: 0;
   margin: 0;
   background-color: #EEE;
   border-bottom: 1px solid #606060;
   height: 100%;
   overflow: auto;
}
div#x03_03_02 {
   padding: 0 0 4px 0;
   margin: 0;
   background-color: #FDF8EA;
   border-bottom: 1px solid #606060;
   height: 100%;
   overflow: auto;
}
Any help much appreciated!!
--
Marty Martin
Senior Web Developer
ICONS, Inc.
Internet Development | Marketing | Support
e: [EMAIL PROTECTED]
p: 540.343.8322  |  f: 540.343.0691
w: http://icn.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div height

[Gunlaug Sørtun]

Abyss Information wrote:
> is there such a thing in css2 that allows for a min height of a div?
> 
> and then auto expand the height as more text is added?

That's exactly what 'min-height: value;' is for.
Doesn't work in IE/win yet, so we usually exploit its 'expand whatever
height defined when needed' by hacking in a 'height: value' for IE/win
only. Then we only have to figure out what went wrong if the proprietary
'hasLayout'[1] results in a broken layout in that browser.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height problem

[Adam Ducker]

Kelly Moore wrote:
> I have a sub-section to my navigation tabs which looks fine in FF, but
> is waaay to tall in IE.   any ideas?  am I doing something weird with
> my divs?
>
> here is a sample:
>
> http://yakmaster.net/test/faq.html
> __
> 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/
>
>
>   

Kelly:

First of all remove '' from the 
top of the code.  This is blowing the doctype away in IE 6.


Secondly, #banner_container is floating, and #sub is not, so you can 
either set #sub to float, or say "clear: both;" to get it to drop down 
to the bottom edge of #banner_container

Third, a similar issue is there because of the floating 
#banner_container.  IE and Firefox differ on how they handle the height 
of objects with floating objects inside them.  A floating object however 
will expand based on the floating objects inside it in all browsers, so 
you should experiment with these, or set fixed heights up there in the 
navigation to get around it.

Fourth, it looks like there is heavy whitespace around the "" and '' section which was causing me some hassle 
in IE 7.

Maybe that will send you in the right direction

-Adam Ducker
__
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] div height problem

[Kelly Moore]

On Thu, Jul 10, 2008 at 6:39 PM, Adam Ducker <[EMAIL PROTECTED]> wrote:
> Kelly Moore wrote:
>>
>> I have a sub-section to my navigation tabs which looks fine in FF, but
>> is waaay to tall in IE.   any ideas?  am I doing something weird with
>> my divs?
>>
>> here is a sample:
>>
>> http://yakmaster.net/test/faq.html
>> __
>> 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/
>>
>>
>>
>
> Kelly:
>
> First of all remove '' from the top of
> the code.  This is blowing the doctype away in IE 6.
>
>
> Secondly, #banner_container is floating, and #sub is not, so you can either
> set #sub to float, or say "clear: both;" to get it to drop down to the
> bottom edge of #banner_container
>
> Third, a similar issue is there because of the floating #banner_container.
>  IE and Firefox differ on how they handle the height of objects with
> floating objects inside them.  A floating object however will expand based
> on the floating objects inside it in all browsers, so you should experiment
> with these, or set fixed heights up there in the navigation to get around
> it.
>
> Fourth, it looks like there is heavy whitespace around the "" and '' section which was causing me some hassle in IE 7.
>
> Maybe that will send you in the right direction
>
> -Adam Ducker
>

Adam, thanks.  Worked like a charm.
__
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] DIV HEIGHT PROBLEM

[~davidLaakso]

Mijin Vladimir wrote:
> I have a problem, how to display a left colum background image to the whole
> width od left side, regardles mainpart length.
>
>   
Add
background: url(../images/background_img.gif) repeat-y; 
to the #wrapper selector.
Best,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] DIV HEIGHT PROBLEM

[Zoe M. Gillenwater]

~davidLaakso wrote:
> Mijin Vladimir wrote:
>   
>> I have a problem, how to display a left colum background image to the whole
>> width od left side, regardles mainpart length.
>>
>>   
>> 
> Add
> background: url(../images/background_img.gif) repeat-y; 
> to the #wrapper selector.
>
>   

Mijin,

What David is referring to is known as "faux columns." More info on it 
is here:
http://css-discuss.incutio.com/?page=AnyColumnLongest

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div height in IE

[Terry Jeske]

http://www.buzzjeske.com/untitled-1.htm

I have a centered div "mainBlock" that contains a div "leftNav" that
is floated left.  I need leftNav to be the same size as mainBlock . 
If I give leftNav a height of 100%, it kind of works in Firefox,
although it appears to push bottom of leftNav into the footer div. In
IE however, the height is not effected at all with a percentage value.

I read on some other posts that the html and body containing blocks
need their heights to be set in order to give the div some percentage
to go off of. But setting them to 100% still has no effect.  On a
similar note, I read in an Eric Meyer book that the containing block
always has to have it's height set, otherwise the nested block will
default to auto.  Setting mainBlock to 100% still has no effect on IE,
but in FF it pushs the footer div past the bottom of the viewport
causing a scroll.

Any ideas on how to implement this? 


his?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height in IE

[Prabhath Sirisena]

I think what you need to do is to contain the floated leftNav in mainBlock.

Try this:
http://positioniseverything.net/easyclearing.html

HTH,
Prabhath
http://nidahas.com


On 5/27/05, Terry Jeske <[EMAIL PROTECTED]> wrote:
> http://www.buzzjeske.com/untitled-1.htm
> 
> I have a centered div "mainBlock" that contains a div "leftNav" that
> is floated left.  I need leftNav to be the same size as mainBlock .
> If I give leftNav a height of 100%, it kind of works in Firefox,
> although it appears to push bottom of leftNav into the footer div. In
> IE however, the height is not effected at all with a percentage value.
> 
> I read on some other posts that the html and body containing blocks
> need their heights to be set in order to give the div some percentage
> to go off of. But setting them to 100% still has no effect.  On a
> similar note, I read in an Eric Meyer book that the containing block
> always has to have it's height set, otherwise the nested block will
> default to auto.  Setting mainBlock to 100% still has no effect on IE,
> but in FF it pushs the footer div past the bottom of the viewport
> causing a scroll.
> 
> Any ideas on how to implement this?
> 
> 
> his?
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> 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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height in IE

[Terry Jeske]

Thx for the tip, that is a great site. However it appears that I
cannot get there from here (at least with IE). So I've had to abandon
a purely positioned site and used a table to get the format I need. So
much for about 5 non-billable hours.

I hate IE
I hate IE
I hate IE
...and then throw dog poop on their shoes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div height problems in Firefox 1.0.4

[Joe Cool]

Good day and I have a little div height rendering problem with Firefox
1.0.4 ( viewing from a WinXP Pro machine ).

http://www.spiritquestdayton.org/dev/

If you view the page, you will see how the parent-container does not
stretch past the bg-container. I would like to have the
parent-container stretch to the very bottom.

This is my first attempt at using an all css layout and I have been
trying to find out why this is happening in Firefox however IE 6.0
renders everything just fine.

At first I thought it actually might be the doctype and tried using
different doctypes and quirks mode which had no effect.

I am not using floats so I know it is not a matter of my having to
"clear" the div etc.

Any help would be appreciated if possible.  All code is on the page
and I would have copied/pasted it at the bottom of this email however
that would have made for a long email which I believe is a bit frowned
upon by list admins.

I hope someone can help guide me to what I might be doing wrong.

Thank you for any help or suggestions,

Michael Goddard
deafninja at gmail dot com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div height in IE6 smaller than FireFox

[Ian Young]

Hi folks

Revamping client website and the design requires elements in centre of
content to line up with left hand column. Looks fine in compliant browsers
but the heights are nowhere near matching up in IE6.

http://www.iyesolutions.co.uk/templates/trossachs/test.html
http://www.iyesolutions.co.uk/templates/trossachs/includes/style.css

Has to be something easy but wood and trees, chaps.
Also, although the heights are in ems, they break out at double zoom in FF.

Any suggestions very welcome.

Cheers

Ian

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.476 / Virus Database: 269.11.0/929 - Release Date: 31/07/2007
17:26
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Div height trick not working in IE

[Eugene Hourany]

Hi gang,

I'm having some difficulty making the same div height trick work in IE 7. Of
course, it works just fine in Firefox 3.5. I need it to also work in IE 6
and 8.

Here's a link that discusses how to do it:
http://www.ejeliot.com/blog/61(I'm not using "faux columns" as there
are dynamic background images).

I apply the overflow: hidden attribute to the parent container, but it's not
working. The shorter column doesn't reach down to match the height of the
longer one, as expected.

The problem I think is that the columns are containers themselves of
content. I'm applying the margin/padding-bottom trick on the innermost
content of the columns, as applying them to the column containers seems to
do no good.

The code:

#section1 { /* the container */
border: dashed 2px #aabbcc;
clear: both;
width: 990px;
overflow: hidden;
}

.home_bttm_block { /* the column container */
width: 484px;
position:relative;
border: solid 1px #fff;
}

.home_bttm_list { /* the innermost dynamic columns */

background: #454445 url(../../images/global/home_races.gif) repeat-x;
border: dotted 2px #c0bb03;
/* same div height trick */
padding: 0px 0px 1000px;
margin: 0px 0px -1000px;
}

Thanks!

Eugene
__
css-discuss [cs...@lists.css-discuss.org]
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] div height problems in Firefox 1.0.4

[Holly Bergevin]

From: Joe Cool <[EMAIL PROTECTED]>

>Good day and I have a little div height rendering problem with Firefox

>http://www.spiritquestdayton.org/dev/
>
>If you view the page, you will see how the parent-container does not
>stretch past the bg-container. I would like to have the
>parent-container stretch to the very bottom.

Hi Michael,

See if you can get the rendering you desire by removing {height: 100%;} from 
#parent-container. Other people are better at explaining why this is than I am, 
but for the purposes of your display, that height is the height of the 
viewport, which is not what you want.

hth,

~holly 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height in IE6 smaller than FireFox

[Gunlaug Sørtun]

Ian Young wrote:
 > http://www.iyesolutions.co.uk/templates/trossachs/test.html

> Looks fine in compliant browsers but the heights are nowhere near 
> matching up in IE6.

1: Add 'display: block' to all images that aren't supposed to be inline 
(default). That means all but a few "arrows" in the left column.

2: Add '* html div {overflow: hidden;}' to make IE6 respect given 
dimensions.

> Also, although the heights are in ems, they break out at double zoom
> in FF.

Happens automatically on first load in all browsers but IE6 at my end, 
since I have 'minimum font size' / 'ignore font size' set.

Once you lock the height to 'em', those containers have to scale in both 
dimensions if they are to contain growing text. This means you'll have 
to set width in 'em' too.

Since you're using a fixed width, you'll have to set 'height: auto' 
(default) if you want them to contain growing text, and find other means 
to create that "equal columns" look.

CSS tables would of course solve the problem, but aren't natively 
supported by IE and I wouldn't recommend the workaround.

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

Re: [css-d] div height in IE6 smaller than FireFox

[Ian Young]

>
> Ian Young wrote:
>  > http://www.iyesolutions.co.uk/templates/trossachs/test.html
>
> > Looks fine in compliant browsers but the heights are nowhere near
> > matching up in IE6.
>
> 1: Add 'display: block' to all images that aren't supposed to be inline
> (default). That means all but a few "arrows" in the left column.
>
> 2: Add '* html div {overflow: hidden;}' to make IE6 respect given
> dimensions.
>
> > Also, although the heights are in ems, they break out at double zoom
> > in FF.
>
> Happens automatically on first load in all browsers but IE6 at my end,
> since I have 'minimum font size' / 'ignore font size' set.
>
> Once you lock the height to 'em', those containers have to scale in both
> dimensions if they are to contain growing text. This means you'll have
> to set width in 'em' too.
>
> Since you're using a fixed width, you'll have to set 'height: auto'
> (default) if you want them to contain growing text, and find other means
> to create that "equal columns" look.
>
> CSS tables would of course solve the problem, but aren't natively
> supported by IE and I wouldn't recommend the workaround.
>
> regards
>   Georg

Thanks Georg,

Of course, I need to set the widths in ems. Duh!

I will look at this later today and see how it looks.

Best

Ian
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.476 / Virus Database: 269.11.0/929 - Release Date: 31/07/2007
17:26

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div height trick not working in IE

[David Hucklesby]

Eugene Hourany wrote:
> Hi gang,
> 
> I'm having some difficulty making the same div height trick work in
> IE 7. Of course, it works just fine in Firefox 3.5. I need it to also
> work in IE 6 and 8.
> 
> Here's a link that discusses how to do it: 
> http://www.ejeliot.com/blog/61(I'm not using "faux columns" as there 
> are dynamic background images).
> 
> I apply the overflow: hidden attribute to the parent container, but
> it's not working. The shorter column doesn't reach down to match the
> height of the longer one, as expected.
> 
> The problem I think is that the columns are containers themselves of 
> content. I'm applying the margin/padding-bottom trick on the
> innermost content of the columns, as applying them to the column
> containers seems to do no good.
> 

Still not sure I understand your problem, since you don't show the
relevant HTML... Any road, you may like to try out these alternatives:

Companion Columns -
http://www.satzansatz.de/cssd/companions.html

Equal Height Columns with... No Hacks
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Eugene Hourany]

Hi David,

Yeah I checked out those sites already on a google search and they didn't
seem to help.

Here's the HTML code in question in quasi-pseudocode fashion:

 

  
 
 

  
  

 
  
   
   
 
 
 

  
  

 
  
  
 
>
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[David Hucklesby]

Eugene Hourany wrote:
[...]
> 
> Here's the HTML code in question in quasi-pseudocode fashion:
> 
>   
>   class="home_bttm_list">  class="home_bttm_list"> 

Re: [css-d] Div height trick not working in IE

[Eugene Hourany]

I just had a huge "duh" moment.

I applied the margin/padding rules to the inner column divs, then removed
them from there and applied them to the outer div, thinking that all it was
going to do was expand the border, when I realized I hadn't set the
backgrounds of either of the outer column div containers!

So when I did this, it worked on both IE and FF.

Thanks for your help David! :D

Eugene

On Thu, Nov 19, 2009 at 9:39 AM, David Hucklesby wrote:

> Eugene Hourany wrote:
> [...]
>
>>
>> Here's the HTML code in question in quasi-pseudocode fashion:
>>
>>   > class="home_bttm_block" id="home_races"> 
>>> class="home_bttm_list"> > class="home_bttm_list"> 
>
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Eugene Hourany]

Sigh.

It stopped working, I'm not sure what happened.

The bottom line is, I have a container div, and two column divs within it,
floated to the left and the right, respectively. I applied the column hack
to the columns, and set the container to overflow: hidden. And...the columns
are expanding the container to beyond the size of the content. There's no
height attribute set anywhere, I made sure of that. The hack is
padding-bottom: 100px and margin-bottom: -100px.

Thanks again,

Eugene

On Thu, Nov 19, 2009 at 9:59 AM, Eugene Hourany  wrote:

> I just had a huge "duh" moment.
>
> I applied the margin/padding rules to the inner column divs, then removed
> them from there and applied them to the outer div, thinking that all it was
> going to do was expand the border, when I realized I hadn't set the
> backgrounds of either of the outer column div containers!
>
> So when I did this, it worked on both IE and FF.
>
> Thanks for your help David! :D
>
> Eugene
>
>
> On Thu, Nov 19, 2009 at 9:39 AM, David Hucklesby wrote:
>
>> Eugene Hourany wrote:
>> [...]
>>
>>>
>>> Here's the HTML code in question in quasi-pseudocode fashion:
>>>
>>>   >> class="home_bttm_block" id="home_races"> 
>>>>> class="home_bttm_list"> >> class="home_bttm_list"> >
>>
>
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[David Hucklesby]

Eugene Hourany wrote:
> Sigh.
> 
> It stopped working, I'm not sure what happened.
> 
> The bottom line is, I have a container div, and two column divs
> within it, floated to the left and the right, respectively. I applied
> the column hack to the columns, and set the container to overflow:
> hidden. And...the columns are expanding the container to beyond the
> size of the content. There's no height attribute set anywhere, I made
> sure of that. The hack is padding-bottom: 100px and margin-bottom:
> -100px.
> 
[...]
Stopped working in all browsers? Or just one or two? Which?

It's hard to diagnose without seeing your actual code. Can you put it on
the Web for us? You can substitute "Ipsum lorem" for the content if it's
sensitive information...

Note that I am still interested in solving this-- I am writing a
tutorial on full height column methods, and seek more information on the
pros and cons of each.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Jay Tanna]

If you tell us what exactly you are trying to do then I may be able to help 
you.  Tell me how many columns you have, and what is the size of each columns 
in percentage.  I will be able to post here a code for the div and related CSS.
 
I use Matthew James Taylor's method which in my opinion is very practical and 
100% CSS/HTML.
 
You can read the article here if you want to have go yourself:
 

 


--- On Sat, 11/21/09, Eugene Hourany  wrote:



Sigh.

It stopped working, I'm not sure what happened.

The bottom line is, I have a container div, and two column divs within it,
floated to the left and the right, respectively. I applied the column hack
to the columns, and set the container to overflow: hidden. And...the columns
are expanding the container to beyond the size of the content. There's no
height attribute set anywhere, I made sure of that. The hack is
padding-bottom: 100px and margin-bottom: -100px.

Thanks again,

Eugene




  
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Eugene Hourany]

I'll try to explain as much as I can without attaching images, as that
would be a violation of css-d. Okay, so here's the scoop:

I have two columns that display scheduling information for a racing
site and race placement statistics. Right now, when you place too much
content in either column, the information spills over onto other
content on the site (the text overlaps a background image in another
div, etc). This seems to happen only in Firefox, and only when there's
too much content.

So my idea was to make it so the two columns could dynamically resize
depending on the amount of content. But that also meant that they
would have to be equal height. So that means eliminating the height
attribute for starters, so on and so forth.

The structure looks like so:

The container is a . The two columns are s. Each column
 holds 3 s, the last of which holds a  (I don't want
to change that since I didn't originally code it). The container is
called #section1, and the columns are #home_races (left) and
#home_standings (right), of the .home_bttm_block class. The inner
s (that hold the s) are .home_bttm_list class, but there's
currently no styling going on there.

I applied the hack on the subset of the site that had just the column
information on another file and it used to work in FF and IE, but when
I applied the trick to the page with all the content, it stopped
working, so I had to go back to square one. This has to work on IE 6+,
FF 3+, and Safari.

HTML:


   
   ... column header1 ... 
   ... column header2 ... 
  
  ... lorem ipsum ... 
  
   
   
   ... column header1 ... 
   ... column header2 ... 
  
  ... lorem ipsum ... 
  
   


CSS:

#section1{
/* content should determine height, not height attribute - ehourany */
/*height: 213px;*/
/* set overflow: hidden on container div to hide the inner column
overflows - ehourany */
overflow: hidden;
}

.home_bttm_block{
width: 484px;
/* get rid of height attributes to give columns dynamic sizing - 
ehourany */
/*min-height: 142px;
height: 142px;*/
position:relative;
/* apply column height hack - ehourany*/
margin-bottom: -100px; padding-bottom: 100px;
background: #454445 url(../../images/global/home_races.gif) repeat-x;
}

#home_races {
float: left;
display: inline;
margin: 6px 0px 6px 7px;
line-height: 12px;
}

#home_standings {
float: right;
display: inline;
margin: 6px 7px 6px 0px;
line-height: 12px;
}

.home_bttm_list{
/* make columns expand by content, not height - ehourany */
/* height:130px; */
/* moved to .home_bttm_block container - ehourany */
/* background: #454445 url(../../images/global/home_races.gif) 
repeat-x; */
}

Thank you all again for your help on this one! I have no idea why this
isn't working.

Eugene

On Sun, Nov 22, 2009 at 2:45 PM, Jay Tanna  wrote:
>
> If you tell us what exactly you are trying to do then I may be able to help 
> you.  Tell me how many columns you have, and what is the size of each columns 
> in percentage.  I will be able to post here a code for the div and related 
> CSS.
>
> I use Matthew James Taylor's method which in my opinion is very practical and 
> 100% CSS/HTML.
>
> You can read the article here if you want to have go yourself:
>
> 
>
>
> --- On Sat, 11/21/09, Eugene Hourany  wrote:
>
> Sigh.
>
> It stopped working, I'm not sure what happened.
>
> The bottom line is, I have a container div, and two column divs within it,
> floated to the left and the right, respectively. I applied the column hack
> to the columns, and set the container to overflow: hidden. And...the columns
> are expanding the container to beyond the size of the content. There's no
> height attribute set anywhere, I made sure of that. The hack is
> padding-bottom: 100px and margin-bottom: -100px.
>
> Thanks again,
>
> Eugene
>
>
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[David Laakso]

Eugene Hourany wrote:
> I'll try to explain as much as I can 
>   
>
> Eugene
>
>   


Would putting the page on a public server and providing a clickable link 
to it in your post be asking too much?

These are not list policies, but it will be greatly appreciated if both 
you and Jay Tanna bottom post and trim what is not relevant to the 
question or reply.

Best,

~d



__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Jay Tanna]

OK change your CSS to as follows or copy and paste it on your test page to see 
if this is what you want.  The columns are of equal length and they work 
perfectly.  Enter some data in your columns like I did in my code.
 
#section2 {
 clear:left;
 float:left;
 width:100%;
 overflow:hidden;
 background:#ffa7a7; /* column 2 background colour */
}
#section1{
 float:left;
 width:100%;
 position:relative;
 right:50%;
 background:#fff689;
}
.home_bttm_block{
    width: 484px;
    /* get rid of height attributes to give columns dynamic sizing - ehourany */
    /*min-height: 142px;
    height: 142px;*/
    position:relative;
    /* apply column height hack - ehourany*/
    margin-bottom: -100px; padding-bottom: 100px;
    /* background: lime;  url(../../images/global/home_races.gif) repeat-x; */
}
#home_races {
 float:left;
 width:46%;
 position:relative;
 left:52%;
 overflow:hidden;
}
#home_standings {
 float:left;
 width:46%;
 position:relative;
 left:56%;
 overflow:hidden;
}



Change your HTML code to as follows:
 

 
     
   ... column header1 ... 
   ... column header2 ... 
  
    ... lorem ipsum ... 
   Put some stuff here 
   Put some stuff here 
   Put some stuff here 
   Put some stuff here 
  
 
 
   ... column header1 ... 
   ... column header2 ... 
  
    ... lorem ipsum ... 
  
 
 


--- On Mon, 11/23/09, Eugene Hourany  wrote:




  
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Eugene Hourany]

Still not working.

The backgrounds of the inner columns are gradients with 9px-thick
borders which are also background images. What's happening is that the
containers of the inner columns (that hold the tables) are stretched
as expected, but it still "looks" like they're staggered.

I think I have to apply the trick to the inner s with the s.

-Eugene
__
css-discuss [cs...@lists.css-discuss.org]
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] Div height trick not working in IE

[Eugene Hourany]

http://www.toyotaracing.com

Columns that say "Upcoming races" and "Driver Standings"

On Mon, Nov 23, 2009 at 5:10 PM, Eugene Hourany  wrote:
> Still not working.
>
> The backgrounds of the inner columns are gradients with 9px-thick
> borders which are also background images. What's happening is that the
> containers of the inner columns (that hold the tables) are stretched
> as expected, but it still "looks" like they're staggered.
>
> I think I have to apply the trick to the inner s with the s.
>
> -Eugene
>
__
css-discuss [cs...@lists.css-discuss.org]
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-d] div height problem in FF/Opera but not IE

[Debbie Campbell]

In this page the height of the #content div is expanding to fit the content
fine in IE, but not in FF or Opera. I've got min-height set to 440 and
that's what FF/Opera is showing - it won't do anything but 440, no matter
what goes in the div.

http://www.parallaxwebdesign.com/projects/falcon/pmachine/blog.php

Please help! I've been trying to fix this for hours...

Debbie
www.parallaxwebdesign.com 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height problem in FF/Opera but not IE

[Ingo Chao]

Debbie Campbell wrote:
> In this page the height of the #content div is expanding to fit the content
> fine in IE, but not in FF or Opera. I've got min-height set to 440 and
> that's what FF/Opera is showing - it won't do anything but 440, no matter
> what goes in the div.
> http://www.parallaxwebdesign.com/projects/falcon/pmachine/blog.php

Trying to catch a float ...
http://www.complexspiral.com/publications/containing-floats/

This must be one of the most-cited links in this list. And if not, it 
should be.


Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height problem in FF/Opera but not IE

[cj]

> Trying to catch a float ...
> http://www.complexspiral.com/publications/containing-floats/
>
> This must be one of the most-cited links in this list. And if not, it
> should be.

i actually prefer method #2 in the wiki on clearing floats (though my
code varies a little [1]), but they have other links there as well.
what i like most is that when ie6 dies, i just have to snip out the ie
fix from my css.  you can use conditional comments of course, but it's
a personal choice.

http://css-discuss.incutio.com/?page=ClearingSpace



[1]
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE5/Mac \*/
* html .clearfix {height: 0;}
/* End hide from IE5/Mac */
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div height problem in FF/Opera but not IE

[Ingo Chao]

cj wrote:
>> Trying to catch a float ...
>> http://www.complexspiral.com/publications/containing-floats/
>>
>> This must be one of the most-cited links in this list. And if not, it
>> should be.
> 
> i actually prefer method #2 in the wiki on clearing floats (though my
> code varies a little [1]) ...
> 
> http://css-discuss.incutio.com/?page=ClearingSpace
> [1]
> .clearfix:after ...

Personally, I see a problem, though. Someone who never has read the 
article I cited or similar basic stuff won't understand the need for 
such a solution.

This is not necessarily a problem. Common not-understanding what and why 
we are doing this and that in CSS is reflected in /our/ Wiki page: "If 
you don't care and just want to 'fix' it, use one of the methods below."

Web designers who need to make money don't have time to read. But then 
there is this list that does the tiresome read+learn, re-read and 
re-learn for them.

The original clearfix solution had its debate once IE7 was up. Many 
feared it can't work. Analyzing why it worked nonetheless in IE7 
revealed some insights why and how the original solution worked in IE at 
all [1].

Anyway, the clearfix-solution is so fascinating to the semanticists 
fraction, we even see it applied to floated boxes ...

Ingo

[1] http://www.tanfa.co.uk/archives/show.asp?var=300

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/