Topic: a little css help.... (Page 1 of 1)

ok it's me again... i've been doing quite a bit of experimentation using css and thus far i'm really pleased with the results. now i'm taking the next step and going for a two column design. all my layouts thus far have been fairly simple. i've made several attempts but i seem to be botching the whole absolute, relative, placement thing....

I volunteered to redo my church website and thought it would be a great project to try this with. I've just created a psd of the layout first, haven't started slicing it yet... wanted to get some input first....

www.wayoutwestenterprises.com/clients/caicc/img/layout1.jpg

thanks!

Looks fine.

now I know u know that just a jpg of the layout.... :-D

There is very little if ANYTHING that you need to position absolutely or even relatively, the design is quite straight forward to markup correctly, and the CSS wouldn't take much to get right either.

If you are having problems though, let us know the specifics.

Cheers,

Thanks Blaise,
Ok layed out the preliminary css here... www.wayoutwestenterprises.com/caicc/

wierd thing is, when i did it on my mac, the elements didn't have that extra space, but now im on a pc editing the css and there's padding somewhere thats messing it up...

The initial solution I couldn't figure out is how to make the content on the right box sit next to the content on the left box, allow a little margin for spacing and tidyness, and make it all clean.

As it is now, it wraps around the first column and looks wierd. Should I be giving the left column a specified height to avoid that problem?

thnx

Ok I made another attempt at this... http://wayoutwestenterprises.com/caicc/index_v2.html

I just need to figure out how to repeat the bg image on the left column. Once I figure that out, I think I'm good.
Unless there's something I completely butchered.

thanks guys.

No time to offer any helpful advice at the moment, but I will say two things:

1) The layout is busted in FF (the text extends beyond the white content area on both the left and right). When I get the chance I'll look at the code and see if I can figure out why.

2) The Gospel of Matthew is spelled with two 'T's and thus can never be abbreviated as "Math" (unless, of course, you are actually quoting from a mathematics textbook ). It is generally abbreviated as "Matt." or "Mt".


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

How about making a bg image of the whole width of your content area (both columns) and having this repeat in your fauxColumns div, that way it doesn't matter which column is the deepest.

quote:

---

Blaise said:

How about making a bg image of the whole width of your content area (both columns) and having this repeat in your fauxColumns div, that way it doesn't matter which column is the deepest.

---

that's the method I usually use, and the only one I've found that works.

Another step in breaking out of the obsolete table layout thought process!

thanks suho.... my bad, that section is just a temporary area anyway. couldn't figure out how to bridge the gap between the header and body and keep the sides matching.

Thanks Blaise, i tried that initially with no success, after a bit of tampering with I got it.

Last thing though is my margins aren't working right for the right column... i adjusted the left column with no problems so the text doesn't bleed over on the the edges but the right column isn't playing nicely....

Well it looks like the width on your rightcolumn is set too high, I would set it to about 580px, with a right margin of about 10px,

But you'll probably want to change it a bit to go with your design ideal.

Hope this helps.

sweet... adjusted and it seems to look fine now. (at least in FF)

Ah, and just as I was about to pop back in and see if I could offer a hand, the problem has been fixed. Looks nice.

http://css.maxdesign.com.au/listamatic/