Faux Columns and Float Issues

[ryan.od]

OK, I understand the concept behind faux columns, but I have an issue that is driving me nuts. If you create a two column layout with the left column floated left, where do you apply the background image? I ask because if one of the columns is floated, the browser sees it as empty and thus the background image will only extend down as much as the other column. This is the issue I am trying to work around with the Faux Column approach!

I have tried adding a footer, clearing it, and putting it in the same division as the two columns. This allows the background image to extend down to the footer (you can apply a background color to the footer to hide the background image).

I have read the ALA article, but it only mentions this scenario as if everyone should know how to handle it. There is no help. Am I missing something obvious?

My second question is this - which layout choice is favored? Floated column layout or fixed width, absolutely positioned column layout? Does it depend on the situation?

Thanks.

RyanOD

[AndyB]

Apply the faux column background to a 'wrapper' div that contains both the sidebar AND the content divs.

As for the other case, scrap the absolutely positioned anything since it only leads to trouble and can be easily avoided almost always by proper application of the float and clear properties.

[ryan.od]

Yes, yes!! That was what I thought too.

Unfortunately, that is the approach I took. My left division and my main division are contained in a container division. The repeated faux background is applied to the container. However, it makes no difference. Then (after it didn't work), it dawned on me that the left division is floated, thus, it isn't 'seen' by the browser. As such, the height of the container division is determined by the main division. The Faux Column approach then fails when the main division is shorter than the menu.

For this to work, there must be some trick I am overlooking.

RyanOD

[AndyB]

What I suggested has worked for me on many sites, whichever 'column' is the longest.

Maybe we need to see a working URL where the html and CSS can be checked.

Do you have the same problem with all browsers?

[ryan.od]

From a technical standpoint, isn't it true that a division background won't fill in if the division contains floated content?

If that is correct, then isn't it also correct that in this situation, the faux background should only be determined by the 'un-floated' division.

I stripped down the code and tried the following. The faux column worked fine in IE6, but in Firefox the container collapsed to the size of the main division - the same issue I am seeing on the site I am developing.

[code]
#container
{
    width:400px;
    background:url(bg.gif) repeat-y;
}

#left
{
    float:left;
}

#main
{
    margin:0 0 0 150px;
}

<div id="container">
    <div id="left">
          Some content
    </div>

    <div id="main">
          Some content
    </div>
</div>
[/code]

There must be a trick. Empty div?

Thanks for your thoughts. I appreciate it.

RyanOD

[ryan.od]

OK, here is the best solution I could find to this puzzling issue. . .

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

It still is not ideal, but it beats adding an empty division or being forced to have a footer.

RyanOD