[Pro] CSS Box Model - Mulitple levels kills color fills?

Freeway
1

Hi,

First-time poster here. I’m building a box model site according to Dan’s videos. Here’s what I’m experiencing.

I have an outer box with 5 full width “sections”. In each of those sections, I have a less-wide, full height box for the centering effect described in the videos.

Applying color fills works just fine UNTIL I add two floated column boxes to my main, centered content area. Then, the color fills of the container holding the two floated column boxes won’t display in a browser. I can fill the columns with color and they display in the browser, but not their container.

Is there a limit to how many levels of containers there can be?

Thanks for any help you can give.
Chris

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

2

Background colors in floated elements only respect the height of any
child elements that are also themselves floated. This is the “float to
clear floats” rule espoused by Dan Cedarholm in his book Bulletproof
Web Design. But remember that floated elements shrink-wrap around
their contents so if you set a background color on one of the
innermost DIVs, that background color will only appear to be as tall
as the contents of the DIV, not the DIV itself or its parent.

There are a few ways to create the color columns within inline DIV
elements such as the layout you describe. One of the easiest is to
make a tiling background image about 25 px tall and as wide as your
centered element, with as many stripes of color as you have columns.
(ASCII-gram of a two-column background image follows)

[///////////////////////////////////|%%%%%%%%%%%]

Apply this image to your centered inline DIV, set to tile vertically.
Now as long as your inner DIVs are the correct widths to match this
image, the illusion will be complete. No matter how tall the
individual inline columns are in reality, they will each appear to
have a background color that matches the height of the tallest column.

Walter

On Mar 27, 2010, at 12:32 PM, Chris Klein wrote:

Hi,

First-time poster here. I’m building a box model site according to
Dan’s videos. Here’s what I’m experiencing.

I have an outer box with 5 full width “sections”. In each of those
sections, I have a less-wide, full height box for the centering
effect described in the videos.

Applying color fills works just fine UNTIL I add two floated column
boxes to my main, centered content area. Then, the color fills of
the container holding the two floated column boxes won’t display in
a browser. I can fill the columns with color and they display in the
browser, but not their container.

Is there a limit to how many levels of containers there can be?

Thanks for any help you can give.
Chris

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

3

This is so perplexing. I think I am doing what you are saying. I appears correct in freeway but not in the browser.

With the exception of the two column boxes, every box is set to float-none and clear-both.

The two column boxes are float-right clear-right, and float-left clear left.

The box containing these two column boxes is the box that loses it’s color. It even loses the image if I fill it with an image. As a background or even as the column trick you described above.

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

4

Can you post a link so we can see it and maybe figure out what the
goal is? If you also post a screenshot of what the page should look
like (the design view in Freeway) then we can compare.

As a general rule: if you have a floated element and it contains non-
floated elements, then the floated element will collapse to nothing,
and the non-floated contents will appear to stick out of the bottom.
Any background on the floated element will also collapse to nothing or
maybe a thin line.

Setting clear on a non-floated element will only affect the behavior
of other floated elements that are its peers, not the non-floated
element itself or any of its ancestors.

Walter

On Mar 27, 2010, at 9:23 PM, Chris Klein wrote:

This is so perplexing. I think I am doing what you are saying. I
appears correct in freeway but not in the browser.

With the exception of the two column boxes, every box is set to
float-none and clear-both.

The two column boxes are float-right clear-right, and float-left
clear left.

The box containing these two column boxes is the box that loses it’s
color. It even loses the image if I fill it with an image. As a
background or even as the column trick you described above.

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

5

I sent you an email message regarding this with a link to download two screenshots from my idisk’s public folder.

Thanks for checking it out.

Chris

On Mar 28, 2010, at 2:41 PM, Walter Lee Davis wrote:

Can you post a link so we can see it and maybe figure out what the goal is? If you also post a screenshot of what the page should look like (the design view in Freeway) then we can compare.

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

6

This is the classic collapsing float problem. A floated element can
contain non-floated elements, but those elements will not influence
the dimensions of the floated container. To force a floated element to
wrap around its contents, make sure that all of that element’s
children are also floated.

Walter

On Mar 28, 2010, at 3:25 PM, Chris Klein wrote:

I sent you an email message regarding this with a link to download
two screenshots from my idisk’s public folder.

Thanks for checking it out.

Chris

On Mar 28, 2010, at 2:41 PM, Walter Lee Davis wrote:

Can you post a link so we can see it and maybe figure out what the
goal is? If you also post a screenshot of what the page should look
like (the design view in Freeway) then we can compare.

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

7

Seems that if I float the main-content container it works but the box slides all the way to the left.

When I set to no-float and margins auto-center it disappears again.

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

8

Ah-ha! If I set the children of the columns to float AND set the container that holds the columns to float it works but that container slides left.

If I set the page alignment to center and the use a left margin on the box holding the columns it works great.

Will there be any ramifications to having the page alignment set to center?

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

9

Only if you have the page set to grow width-wise, which you don’t seem
to be doing here. Otherwise you are safe to let the page alignment do
the same thing as the margin-auto on the outermost HTML box in your
current layout.

Walter

On Mar 28, 2010, at 7:39 PM, Chris Klein wrote:

Ah-ha! If I set the children of the columns to float AND set the
container that holds the columns to float it works but that
container slides left.

If I set the page alignment to center and the use a left margin on
the box holding the columns it works great.

Will there be any ramifications to having the page alignment set to
center?

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