17 replies [Last post]
twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Hi, I'm pretty new to CSS and I think I'm having trouble understanding how heights work.

Assuming this is a fairly common issue, I did a couple of searches and couldnt find anything that solved my problem.

Basically this page has a header, a footer, and in between there are two cells. I want the middle section to start at 600px height, but if need be, expand if there is more content.

This works in IE the way I want it, but not in Firefox.

In IE, the middle expands to fit all the text. In firefox, the text just runs over and out of the middle div.

I know that IE is not great for CSS, but 71% of my visitors use it, so it has to work for both IE and Firefox.

Here is a link to a sample page:
http://www.summitsix.com/help.php

The stylesheet and html are both in the source.

Thanks!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Div Heights and expanding content

What you want to use is min-height, which will work for all standards compliant browsers. Of course IE is a POS and won't honor it, but you've already discovered the work-around. Feed only IE a fixed height and it will treat it as min-height, incorrectly expanding an element to fit all content.

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

How do I feed only IE?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Div Heights and expanding content

* html yourdivname {height: 600px;}

only IE sees an element outside of html

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

Okay I can get this to work if the text is the only thing inside of the div. But if I add divs inside, and put the expanding text inside those, it still overflows.

How do I get the child divs to affect the parent as well?

http://www.summitsix.com/help.php
^^most recent file

Thanks for the help

xlee
Offline
Regular
Last seen: 14 years 22 weeks ago
Timezone: GMT+8
Joined: 2004-05-15
Posts: 17
Points: 0

Div Heights and expanding content

try this.

#container (
height: auto !important; /* Mozilla line 1 */
height: 600px; /* IE line 2 */
min-height: 600px !important; /* Mozilla line 1 */
min-height: 0em; /* IE 7 hacks line 2 */
)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Div Heights and expanding content

Hi

In IE the children should push the parent down, but you may need to put clearing hacks for FF etc, or feed the parent overflow:auto and then hack IE back to overflow:visible

Trevor

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

xlee wrote:
try this.

#container (
height: auto !important; /* Mozilla line 1 */
height: 600px; /* IE line 2 */
min-height: 600px !important; /* Mozilla line 1 */
min-height: 0em; /* IE 7 hacks line 2 */
)

www.summitsix.com/help1.php

Didnt seem to do anything?

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

ClevaTreva wrote:
Hi

In IE the children should push the parent down, but you may need to put clearing hacks for FF etc, or feed the parent overflow:auto and then hack IE back to overflow:visible

Trevor

Hey Trevor, thanks for helping out.

But, remember... I'm pretty new to this CSS stuff, soooo I have no idea what you just said haha. :oops:

Can you explain a little more?

Doesnt overflow add scroll bars to content that goes beyond the divs? I dont want scrolls, I just want the div to get bigger if there is a lot of content that extends below the min-height of the div.

Thanks!

xlee
Offline
Regular
Last seen: 14 years 22 weeks ago
Timezone: GMT+8
Joined: 2004-05-15
Posts: 17
Points: 0

Div Heights and expanding content

sorry I do not view your source.

#section_middle {
width: 800px;
height: auto !important; /* Mozilla line 1 */
height: 600px; /* IE line 2 */
min-height: 600px !important; /* Mozilla line 1 */
min-height: 0em; /* IE 7 hacks line 2 */
)

try not to use underscore #section_middle, use #section-middle.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Div Heights and expanding content

xlee wrote:
try not to use underscore #section_middle, use #section-middle.

Why :?:

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

xlee wrote:
sorry I do not view your source.

#section_middle {
width: 800px;
height: auto !important; /* Mozilla line 1 */
height: 600px; /* IE line 2 */
min-height: 600px !important; /* Mozilla line 1 */
min-height: 0em; /* IE 7 hacks line 2 */
)

try not to use underscore #section_middle, use #section-middle.

k, I put that in and it didnt seem to change anything:
http://www.summitsix.com/help.php

I also tried it by putting it on the subsect_content div (thats inside of the section_middle div, its the one that has the 'test text') and it didnt do anything either.

Any other ideas?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Div Heights and expanding content

twister77 wrote:
Can you explain a little more?

Doesnt overflow add scroll bars to content that goes beyond the divs? I dont want scrolls, I just want the div to get bigger if there is a lot of content that extends below the min-height of the div.

Hi

There is quite a lot of debate about container behaviour in FF and others. Essentially, the bottoms don't seem to work, so content that is clearly in them doesn't stay in!

There is a sticky thread (I think) by Tony on this matter. BUT, often adding overflow:auto to the offending div whose bottom doesn't move often fixes it (but you have to feed the overflow:visible to IE).

Have a read of this (check the whole site out anyway, it's all good):

http://www.positioniseverything.net/easyclearing.html

Trevor

xlee
Offline
Regular
Last seen: 14 years 22 weeks ago
Timezone: GMT+8
Joined: 2004-05-15
Posts: 17
Points: 0

Div Heights and expanding content

tan hacks. * html div(--) refer
http://www.meyerweb.com/eric/thoughts/category/css/

if use * html div(--) in IE 7 it needs another embeded CSS.

<!--[if IE]>
<style type="text/css">

* html #divisionaa {
height: 600px; }

</style>
<![endif]-->

twister77
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2005-11-07
Posts: 10
Points: 0

Div Heights and expanding content

The clearing tutorial seems to work pretty well.

However... The middle section is made up of two divs, one for main content and the other a sidebar with other menu options. Both should stay the same height, but since the left div is expanding, the right doesnt know that and doesnt expand all the way.

I used a height: 100% on the right div to no avail in FF.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Div Heights and expanding content

Hi

You may need to use faux columns to do that. Google alistapart faux columns

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 40 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Div Heights and expanding content

ClevaTreva wrote:
xlee wrote:
try not to use underscore #section_middle, use #section-middle.

Why :?:
For the same reason I hate underscores? It's harder to type (and read) than a hyphen. Smile I thought everyone knew that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Div Heights and expanding content

kk5st wrote:

For the same reason I hate underscores? It's harder to type (and read) than a hyphen. Smile I thought everyone knew that.

Hi Gary

I ALWAYS use them coz always have! Mainly because I was taught to program that way and use underscores for my variables, NEVER hyphens.

But I hate to agree with you, the hyphens are easier to read.

Trevor