Hacking Away: 3 Column CSS Mess

  • Questions. Problems. Help?
    Try not to laugh at how mangled my site is at the moment. This is a work in progress. I’ve been trying to learn a lot on my own, but there’s only so many hours in a day.
    The left column displays posts in the “normal” manner. I’ve hacked up index.php to give me the latest excerpts from one category in the center column. The third column is for everything else.
    Current burning question: When clicking the links to posts, they appear in the left column. This is silly when I click on a post from the center column and it appears to the left of it. I’d like, instead, for the full posts to appear in a new layout, likely a two column design (basically, the site without the center column). I have no idea how to do this.
    I’ve been searching for a post that showed only the “comments” page when you clicked on the post link. That might help me, even though I’m going to be using forums instead of comments, I could use the comment CSS styles for this cleaner design.
    I know this site has a LONG way to go. I’ve gone about making 3 columns all wrong. I’ve given Dots and Trident a shot, but neither worked for me. My dream of liquid columns is probably foolhardy. My footer is out of whack, the columns bleed into one another and extend beyond their divs, and the #rap doesn’t talk to me anymore. Probably best not to even mention yet the differences in IE vs. Firefox displays.
    I tried. Um, anybody up for some hand-holding?

Viewing 15 replies - 31 through 45 (of 46 total)

  • Isnt CSS positioning in 3 cols a lot of fun ?

    what containers should have height: auto?

    I am sorry but on further reflection that is not going to work. As a general rule I never use position absolute for menu positioning on a blog as you are doing. I cant help. Sorry.

    Thread Starter paticoflange

    (@paticoflange)

    Isnt CSS positioning in 3 cols a lot of fun ?

    Yep. Loads.

    ok, I am switching to relative and fixed width. I am just adjusting for an overall width of 780.
    Root: I need clairifatiion on something:
    I would think that the width of main would?? be menu+content+rmenu, but that total is 785, far more than 645.
    Can you please explain?
    thanks,

    If you use floats instead of absolute positioning, and then add a div that clears both (<div style="clear: both;"></div>) that should get the columns to be even…I’d have to mess around with it to be sure, but in theory, I think that should do it.
    The tricky part about your request is the middle column being fluid. A real easy way to get the columns to all have the same height, is to use Dan Cederholm’s idea of Faux Columns which I use on my site as well, but for a 2-column layout. I hope that gives you a starting point to look at…

    hey — I think I am almost there. Check out https://www.passingnotes.com/dev/.
    The only isusue I am having is the proper width for main to ensure vertical alignment in ie (looks great in mac firefox)
    thanks

    Im up . Let me look.

    @elasticdog. For the benefit of subsequent readers both the Gemini (2 col) and Trident (3 col) are already fitted with faux columns. Thanks.

    I had similar problems with IE, and to fix it, you have to pay attention to the padding of the divs, and not just the widths of the divs in your css file. For instance, my total “container” (which holds both columns) has width: 769px;, my main column has width: 464px; padding: 24px; and the right column has width: 220px; padding: 18px;
    Adding these up, including the left and right padding for each div, the total is 768px, which is 1px off due to a separator line in between the two columns. I hope that example makes sense…if it helps, feel free to take a look at my css file.

    Ahh, thanks Root…I’m a WP newbie, and haven’t taken a look at those templates. Good to know!

    Elasticdog you are confusing the issue for dmc. The template does not include the stuff you are mentioning.

    Typo in my math. Just edited my figures above.

    by george I think I have got it!
    Check out https://www.passingnotes.com/dev/.
    Thanks so much!

    Well thank heavens for that ?? Welcome to WordPress. Trident will give you a link as a known user. Thanks.

Viewing 15 replies - 31 through 45 (of 46 total)
  • The topic ‘Hacking Away: 3 Column CSS Mess’ is closed to new replies.