Jump to content
xisto Community
moldboy

Two Column Design Using Css And Faux Columns

Recommended Posts

I recently posted a question regarding how to make two colums the same height, in short it can't be done, but there is a way using a tiled background image, ok fine. My probloem how exists that this image isn't the background of the body rather a DIV and I can't get hte two nestled DIVs to lign up next to each other, I've tried floating byt that removes the cells from the current document low and their height doesn't apply to the faux columns, I have also tried the four position options, static, absolute, fixed, and relative. None if them work however some kinda work but for the ones that work no position can be set to make the coums line up, only to have the one on the right start right after the one on the left. THe page is http://forums.xisto.com, the layout I have right now does work except the text coumns are not suposeto be there and there should be part of the box from the revious DIV behind them.

This is what it should look like:

Posted Image

Share this post


Link to post
Share on other sites

Remove the background position: center from your background image, remove the absolute positioning from the left column and give it float: left and a width instead. Then give the right column a margin-left wider than the width of the left column. The right column doesn't need a width.

Share this post


Link to post
Share on other sites

Nope that doesn't quite do it, Although it's a start, the dark green div doesn't extend the entire height of the two column area, I also took the liberity of commenting out all the position tags, (after first trying your suggestions) still nothing. Note I don't quite have the numbers right for it to work in IE, so I'd recoment only looking in FireFox (I don't need help fixing this, just more time)I know it's a very messy CSS sheet, with all the comments, but I'm still tweeking it, anyway the address above is the changed page. Thankyou for your reply, and any aditional replyes

Share this post


Link to post
Share on other sites

I recently posted a question regarding how to make two colums the same height, in short it can't be done ...

 

I just checked your website and it looks like you have got things working the way you want. :angry:

Just wanted to say that your original post, see comment above, got me curious to try out the method explained at http://forums.xisto.com/no_longer_exists/ and I found that it worked OK, in fact it was v. easy to implement and it doesn't need a background image. I will gladly show you what I did if you want.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.