div in a div problem

Junior WebHelper Joined: 06 Dec 2003 Posts: 25

Hi -

I was so impressed with your new site I have been experimenting with CSS as I have always used tables...

I have got everything to work in IE but having issues with the others, I think the problem is pretty elementary and how i have the divs layout. Basically it seems that the height in the CSS isn't doing anything...

Site : http://dev.byng-designs.com/byng/
CSS : http://dev.byng-designs.com/byng/template.css

Any suggestions?

Posted: Tue Dec 09, 2003 4:16 pm (20 years, 4 months ago)

I encountered that problem myself, and now can't remember how I cured it.
I think it had something to do with display:inline (mozilla and firebird seem to not change the <div> height to surround the content (even if height has been declared))

Posted: Tue Dec 09, 2003 7:34 pm (20 years, 4 months ago)

I ran your page throught the validator and there's quite a few errors there - my guess is that if you fix 'em it'll work as you want. You also need to specify a character encoding in a <meta> tag, though I chose one to get the validator to work Wink

Junior WebHelper Joined: 06 Dec 2003 Posts: 25

ah - ok, an embarrasing amount of errors there, i'll correct them and see what prevails... no doubt i'll be back here Wink

Junior WebHelper Joined: 06 Dec 2003 Posts: 25

Just to let anyone know who has this problem, there is a mozilla fix:

http://www.webmasterworld.com/forum83/1725.htm

Posted: Thu Jan 08, 2004 8:10 pm (20 years, 3 months ago)

heh, it wants a login...care to plagerize...er, I mean quote the content? Smile

Team Member Joined: 06 Jan 2002 Posts: 2564

I just visited the link and don't get asked to login... Question

Junior WebHelper Joined: 06 Dec 2003 Posts: 25

hmmm - works with a referrer from google:

http://www.google.co.uk/search?hl=en&ie=UTF-8&oe=UTF-8&q=%22the+stretching+div+problem%22&meta=

Posted: Thu Jan 08, 2004 9:36 pm (20 years, 3 months ago)

Quote:

status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view.

heh, must be NTL...but the google thing worked Smile

Posted: Thu Jan 08, 2004 10:11 pm (20 years, 3 months ago)

Nah, just just NThelL, but BY also Smile

I can't even view it from Google Surprised

So care to explain for the poor BY user.

Junior WebHelper Joined: 06 Dec 2003 Posts: 25

From : Suzy ( http://www.webmasterworld.com/forum83/1725.htm )

Quote:

Moz is exhibiting the correct behaviour. Floated elements are not in the flow of the document so the parent element doesn't even know it's got any children Wink

the most common way to workaround this previously was to use a "spacer" div:
<div style="clear: both;"></div>
and this needed to be inserted in the HTML before closing the containing div.

However, there is another way to make a parent element "stretch" to contain its floated children elements using CSS only, which to me makes things much neater..

It uses the :after pseudo-element selector to produce "generated content", then clears this "content" using clear: both; (Note: Moz actually requires something in this content field, hence the need to specify line-height and font-size to "hide it" again.)

see this example:

Code:

CSS:
#container {
position: relative; /* required by NN */
width: 700px;
border: 1px solid #000;
background: #ffe;
margin:0 auto;
padding: 20px;
}
/* the workaround */
/* moz 1.4 requires something in the content field */
#container:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}

.leftfloat {
float: left;
width: 350px;
background: #cff;
}

.rightfloat {
float: right;
width: 350px;
background: #cfc;
}

HTML:

Code:

<div id="container">
<div class="leftfloat">...left floated div....</div>
<div class="rightfloat">...right floated div...</div>
</div>

IE doesn't support the :after pseudo-element but then it doesn't have to it does what you want (wrongly) anyway!

This should work with your code above fungku..

Suzy

My Musical Preferences · Posted: Fri Jan 09, 2004 10:42 am (20 years, 3 months ago)

Excellent, got rid of all my spacers now Smile

Posted: Fri Jan 09, 2004 12:05 pm (20 years, 3 months ago)

Thanks Ollie, and I love Suzy whoever she is Smile

Time to go get rid of some spacers/<br />s Smile