Help With Faux Columns

[Conor]

Ok I'm working on another design for my site, because Im bored. http://www.complexfellow.com/experimental/

Thats what I have so far, I'm not very far into it. Im just wondering why the tan color goes across the top of the site. Help here would be appreciated, thanks

[pyro]

Faux columns as in "Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)"?

[Conor]

yup thats the one, as you can see I'm having lots of trouble getting it to appear correctly.

[pyro]

I don't even see where you doing anything along those lines...?

[Neczy]

This elementary CSS rule is added to the body element:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Essentially, we’re making the entire page’s background color grey and tiling it vertically only (repeat-y). The 50% 0 bit refers to the positioning of the background image — in this case, 50% from the left side of the browser window (resulting in a centered image) and 0 pixels from the top. @ ALA


That help? Might be easier to just look in the article to the section where they talk about the CSS, as my quote doesnt really help much until you read the ahead part.

[Conor]

nevermind, I had a stray <br /> , sorry for bothering you guys.

[Neczy]

ah okay looks fixed, glad you found the error.

[Conor]

Im stilling having problems again. If the footer div is removed it doesnt work.

http://complexfellow.com/experimental

http://complexfellow.com/experimental/index2.html

[Neczy]

no such file as "bgthing.jpg" I dont think. Thats your problem me thinks.

[Conor]

eh, I just put an empty div with clear both and it works

So I guess there are other ways to create hte equal columns, differrent from the faux columns article

[Neczy]

lol...

[pyro]

Didn't look at what you did, but can either column be the longest?

[Primal]

If you want a column that runs the entire length down the page (as long as the content, anyway) check out Daniel T's website.

http://www.thenamesdan.com/

I like the way he implemented the faux column. He added an image to the container div that repeats down the right side. Simple, yet ingenious...

[Conor]

Pyro Yes. You have to set the bg color of the container to the same as the longer column.

[pyro]

Why is what Daniel T did any different than what Dan Cederholm explains how to do in his article?

[pyro]

Originally posted by RefreshF5
Pyro Yes. You have to set the bg color of the container to the same as the longer column. So in other words, no. You would have to know which column would be longer. With faux columns, you don't need to know that...

[Conor]

yeah I guess your right, but I dont understand faux columns and I know which column will be longer so it works for me.

Edit:I think I just came up with a new method that will work no matter which column is longer. Time to do some testing[

[MstrBob]

I'm confused, up to this thread I thought the whole idea behind faux columns is that you created them visually with a background image, and then aligned your divs so that they are transparent and the text fits so that all the columns are of the same size.

[Neczy]

That is what faux columns is for.

[Primal]

pyro, you are absolutely correct. Sorry for jumping in there a bit too quick.

<offtopic>
You know, I've been coming here asking for advice for a while now, seen your name on the board and not until tonight did I realize who you were... I love your websites.
</offtopic>

[pyro]

Hey Primal, thanks. If I wasn't know as "pyro" to so many people on this board, I'd change my username to ryanbrill or something similar, but when I signed up on this board a year and a half ago, pyro it was, so pyro it is... ;)

[DaveSW]

and ever will be or else we won't know who he is...

:D

[Ben Rogers]

<offtopic> (As if that makes it all right :p) I think if you changed your username to Brilly-boy or something (Just kidding, just kidding...) everyone would know about the change within the next hour or so... or until they logged in, anyways. And as long as you kept the avatar, people'd know who you are. Anyways, why'd you choose Pyro, anyways? The path to greatness (:p) involve burning down a few things in anger? :D</offtopic>

[pyro]

Originally posted by omega
Anyways, why'd you choose Pyro, anyways?I chose "Pyro" because 3-4 years ago, some friends and I played around with 3D graphics and animation a bit, and called ourselves "Pyro Productions". It's really a rather lame screenname... :D

[Ben Rogers]

No, you don't even have the right to say Pyro's a lame screenname. At least you don't when talking to someone who got their screenname from a videogame (Final Fantasy's Omega Weapon :D). ;)

[Conor]

I think I fianlly understand faux columns, someone want to tell me if I did it right?

[pyro]

Yep, looks like it. :)

[Conor]

awesome, now to decide how I want to lay out list elements on my new layout.

[Conor]

I seem to be having a problem with padding, when I add padding to the content div it bumps all the content down way more then the padding now. As you cansee I have only applied a single pixel of padding but its bumping down much more then 1 pixel.

[pyro]

Are you calculating the padding into the overall width?

[Conor]

I thought padding just pushed an image off the sides of an element, and didnt effect width. It makes it wider? Its not like Im applying padding to #container its to .content

[Neczy]

if the content container is supposed to be 500px wide, and you add 5px padding, then the div needs to be 490px wide, because padding counts as its width.

[Conor]

thanks I didnt know that.

[Neczy]

no problem