4 replies [Last post]
rezon
Offline
Regular
Last seen: 14 years 31 weeks ago
Joined: 2005-09-07
Posts: 12
Points: 0

Me again. I'm having a problems with my white container background in Firefox. Because the amount of comments fluctuates, I have to have the height of the container set to auto. As you will notice, Internet Explorer actually understands this concept (wow, a first for me). However, in Firefox, it appears that the container, when set to auto for its height, only is as high as the navigation menu.

http://dan.ivillage.cc/shuttered/entryinfo.php
http://dan.ivillage.cc/shuttered/shuttered.css

Any help is GREATLY appreciated!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(Problem) Height: auto;

Unfortunately IE understands little and gets many things wrong - including not displaying your page according to how the standard says it should.

Floated elements are outside normal flow. Block elements don't see them, so the shouldn't expand to surround them. There are two simple mechanisms to force a block element to surround its floated children.

One, put some content beyond the floats in your html, ensure its cleared so it will also appear beyond the floats in the browser. Self clearing (otherwise known as "clearfix") is a good and unobtrusive way to do this.

Two, set the overflow value of the container to something other than visible - so hidden or auto. Since you haven't specified a height this effectively forces the container to surround your floats. Be careful with this one, under some circumstances it may cause side effects in some browsers.

For more information, google on floats and on clearing floats.

Briggsy
Briggsy's picture
Offline
newbie
Last seen: 14 years 30 weeks ago
Timezone: GMT+12
Joined: 2005-09-14
Posts: 4
Points: 0

(Problem) Height: auto;

I have a DIV container that holds content, and had the same issue with my nav menu. So I used the following CSS

#minhieght{
	height: 347px;
	float: right;
	width: 1px;
}
#minhieghtend{
	clear: both;
	height: 1px;
	overflow: hidden;
}

In the HTML I just had a the "minhieght" before the content and then the "minhieghtend" after the content. Its worked a treat.

<div id="content">
      <div id="minhieght">
      </div>      
          blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah
      <div id="minhieghtend">
      </div>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(Problem) Height: auto;

thats a spacer div and while it works it shouldn't be necessary.

try using

#content {min-height: 347px;}
#content:after {content: '.'; display:block; height: 0; visibility: hidden; clear:both;}
* html #content {height: 347px; }

<div id="content">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah
</div>

The first two rules are for standards compliant browsers, like Firefox, Opera, Safari. The last rule is for IE6 and below.

Briggsy
Briggsy's picture
Offline
newbie
Last seen: 14 years 30 weeks ago
Timezone: GMT+12
Joined: 2005-09-14
Posts: 4
Points: 0

(Problem) Height: auto;

Yup that worked nicely too, and a bit tidier, thanks.