[Pro] background color of parent div disappears ...

Working on a new website for our company (Inline boxmodel layout),
What I’ve done, worked pretty good untill the last adjustment.

Search :

Sales : +31 (0)10 290 65 25 sales@cobeco.nl Language : English

The DIV “top”, which has a width of 100% and contains 2 levels of child DIV, lost it’s height as soon as the second level DIV’s (both anonymous) were inserted in the child DIV “topitems”.

The height of the anonymous DIV’s should define the height of the DIV “topitems”, which should define the height of “top” … but “top” dissapears, and all of the sudden needs a defined height to show.

Anyone an idea why that is? It worked perfectly with just the child DIV “top”, but as soon as “top” hosts it’s own child DIV’s … all goes wrong.

Thanks in advance, Richard

http://cobeco.nl/beta/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think it has something to do with the floats inside your “top” div.
You need to clear them by inserting either a third div inside of
“topitems” (after the first two) that has the clear attribute set to
both, or by inserting it after “topitems” inside of the “top” div.

This is common practice (for me) when using inline layouts with floats
– to use a clearing div to reset behavior.


Ernie Simpson

On Tue, Sep 4, 2012 at 3:14 PM, Richard van Heukelum
email@hidden wrote:

Working on a new website for our company (Inline boxmodel layout),
What I’ve done, worked pretty good untill the last adjustment.

Search :

Sales : +31 (0)10 290 65 25 sales@cobeco.nl Language : English

The DIV “top”, which has a width of 100% and contains 2 levels of child DIV, lost it’s height as soon as the second level DIV’s (both anonymous) were inserted in the child DIV “topitems”.

The height of the anonymous DIV’s should define the height of the DIV “topitems”, which should define the height of “top” … but “top” dissapears, and all of the sudden needs a defined height to show.

Anyone an idea why that is? It worked perfectly with just the child DIV “top”, but as soon as “top” hosts it’s own child DIV’s … all goes wrong.

Thanks in advance, Richard

http://cobeco.nl/beta/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can also set overflow to hidden on the parent. Counter-intuitively, this will cause all of the floated elements to appear (not to be cut off as you might imagine).

Walter

On Sep 4, 2012, at 3:48 PM, Ernie Simpson wrote:

I think it has something to do with the floats inside your “top” div.
You need to clear them by inserting either a third div inside of
“topitems” (after the first two) that has the clear attribute set to
both, or by inserting it after “topitems” inside of the “top” div.

This is common practice (for me) when using inline layouts with floats
– to use a clearing div to reset behavior.


Ernie Simpson

On Tue, Sep 4, 2012 at 3:14 PM, Richard van Heukelum
email@hidden wrote:

Working on a new website for our company (Inline boxmodel layout),
What I’ve done, worked pretty good untill the last adjustment.

Search :

Sales : +31 (0)10 290 65 25 sales@cobeco.nl Language : English

The DIV “top”, which has a width of 100% and contains 2 levels of child DIV, lost it’s height as soon as the second level DIV’s (both anonymous) were inserted in the child DIV “topitems”.

The height of the anonymous DIV’s should define the height of the DIV “topitems”, which should define the height of “top” … but “top” dissapears, and all of the sudden needs a defined height to show.

Anyone an idea why that is? It worked perfectly with just the child DIV “top”, but as soon as “top” hosts it’s own child DIV’s … all goes wrong.

Thanks in advance, Richard

http://cobeco.nl/beta/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

First of all, thank you both Ernie and Walter for the quick reply’s!

@ Ernie : I’m still trying your solution, I’ll keep you posted!

@ Walter : this worked immediately, indeed I would never have tried that exactly for that reason.

Regards, Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, you are still schoolin’ me after all these years :slight_smile:


Ernie Simpson

On Tue, Sep 4, 2012 at 3:51 PM, Walter Lee Davis email@hidden wrote:

You can also set overflow to hidden on the parent. Counter-intuitively, this will cause all of the floated elements to appear (not to be cut off as you might imagine).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I learned that trick from Dan Jasker.

Walter

On Sep 4, 2012, at 4:49 PM, Ernie Simpson wrote:

Walter, you are still schoolin’ me after all these years :slight_smile:


Ernie Simpson

On Tue, Sep 4, 2012 at 3:51 PM, Walter Lee Davis email@hidden wrote:

You can also set overflow to hidden on the parent. Counter-intuitively, this will cause all of the floated elements to appear (not to be cut off as you might imagine).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dan’s spirit still is present in this community :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Sep 2012, 8:54 pm, Richard van Heukelum wrote:

Dan’s spirit still is present in this community :slight_smile:

Yes - but he struggled as far as I remember with something totally different (he even made a quick screencast to that time). The point is simple:

Inline divs floated to left and right are causing a height of 0 of the parent div. Overflow hidden is one but not the entire solution.

But read more at:

http://www.freewaytalk.net/thread/view/114205#m_114219

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

( I’ve bought almost all his screencasts, probably skipped a handfull )
Thank you for the update Thomas, I’ll read it! :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Richard,

just to avoid any misunderstandings:

Dan posted his problem via screener, not the solution as a screencast. I dig the following out where I was sure it was the original one:

http://www.freewaytalk.net/thread/view/82334#m_82455

By the way: Who the heck is FeebleEagle?

Hmmm.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options