Jul 25, 2008

Two Column Design Using Css And Faux Columns

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

free web hosting

Two Column Design Using Css And Faux Columns

moldboy
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://d-gression.trap17.com/again, 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:
IPB Image

 

 

 


Reply

Tyssen
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.

Reply

moldboy
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

Reply

Tyssen
QUOTE(moldboy @ Apr 13 2006, 02:47 PM) *

the dark green div doesn't extend the entire height of the two column area

Remove the position:absolute from #content.

Reply

mik
QUOTE(moldboy @ Apr 12 2006, 11:55 PM) *

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. smile.gif
Just wanted to say that your original post, see comment above, got me curious to try out the method explained at http://www.positioniseverything.net/articl...out/equalheight 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.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : css faux columns


    Looking for column, design, css, faux, columns

Searching Video's for column, design, css, faux, columns
advertisement



Two Column Design Using Css And Faux Columns



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE