Support » Themes and Templates » Lining up the columns??

Lining up the columns??

  • I’m new to css. And to WordPress. I had no trouble installing the program and with a bit of fiddling–and some nosing around css references linked here–managed to get my blog to roughly approximate the design of my website.

    Here’s the URL of my blog: http://www.gymshoesmusic.us/Amp/
    Not a perfect match of the website, but close. 🙂

    The problem is with the columns. I have left and right nav columns in addition to the center where the entries go. The problem is that all the individually columns stop when they run out of text, so all three columns are an uneven length. (Scroll down the pages and you’ll see.) Since a lot of my entries are long, I just padded the hell out of the left and right columns to make them go down the page, but this isn’t a satisfactory solution because each page will be a different length.

    Also, something weird is happening with the center and right (menu) columns. When the right column ends, then the center column spreads out all the way to the right. It doesn’t do this on the left. Of course, it wouldn’t be a problem if all the columns were the same length down the page. 🙁

    I know this is probably something simple, but I’m going mad fiddling with it. How do I make all the columns even up?



Viewing 15 replies - 16 through 30 (of 31 total)
  • I removed it, but it didn’t change anything. The right menu is still at the bottom of the column. The code may be cleaner, but the effect is exactly the same. (sigh)

    That thin black line is marking the end of the #content div.
    Have you tried moving a </div> from just above the rmenu to below it ?

    Just put this in instead of float right for your right column use position:absolute;
    left/ whatever width clears your main content;} this will do it for you


    PS Sachmo is my dogs name, since I posted my email on this board I used his email just incase it got spammed

    Podz: moving the div tag as suggested hashed the layout much worse.

    Dawg: changed only the #menu and at 1024 x 768 the menu disappears. At higher res the menu shows up at the bottom.

    That’s with ONLY the change to the menu. However, your screenshot shows that some of the css above #menu was also changed. I’m guessing that it’s #content…but making that change eliminates the right menu at all resolutions. 🙁

    What other changes did you make besides the menu? (Like just above #menu in the screenshot.) #content? #main?

    Seeing this late and am going to bed but you could position everything from left such as

    left menu{

    left: 220px;
    width:200;} This should work, I do not have the other changes off the top of my head as I thought you said you got them from my screenshot.

    I said I’d get them from the screen shot; in my exuberance I didn’t realize that all the changes to the .css weren’t visible in the shot. 🙁

    I tried the suggestion above. The whole screen went black except for the title links. No sign of the menu (white letters) either. (sigh).

    If you’ve got the full .css you used in the screenshot, let me know. Otherwise, it’s back to the drawing board…

    Sorry it was late last night and I may not have made this clear, the two divs for right and left menu have to correspond exactly how youyour divs are in your layout.css file so if they are rmenu you would have to make the appropiate changes to the text for the correct divs. In the original all I did was position the right column absolute. What you have to keep in mind is the 60 pixels on the left {screenshot}wher I am editing will throw my nubers off slightly.

    #content {
    float: right;
    width: 400px;
    padding: 0px 200px 0px 0px;}

    #rmenu {
    width: 195px;
    color: #fff;
    those are the changes from the screenshot

    I understood that the css was rough. 😉 Before uploading it I made all the necessary changes to make it correspond to the divs in my .css. I neatened it up, uploaded it and the screen went black except for the entry titles (red link) and the site menu image on the left and a bit of the header. Everything else was black.

    I didn’t realize that the column where you are editing would throw the number off. 🙁

    Also, you definitely changed more than the rmenu absolute. Look at my .css in the above post and then look at the numbers in the screenshot. You changed other variables in #rmenu, you changed the numbers in #menu and you changed something above #menu…possibly #content. (I tried those numbers for #content and that doesn’t work either.)

    There is some magic combination of numbers that works with this layout. I just can’t figure out what they are. 🙁 Now I’m going to have to log off for today. I’ll check back tonight or tomorrow morning to see if anyone has the solution. (It’s like some weird math puzzle…)

    Thanks for your help.

    Ok but my math does add up here is your index file and your css with my site.


    It still only looks like two columns, but I guess that’s because it doesn’t have my images. E-mail me that index.php and .css file, so I can try it. I’m thinking that between the two of us working on it that what I’ve got now isn’t what you’ve got. Something maybe got scrambled because it was being simultaneously worked on by both of us. 😉


    Well, it’s beginning to look like Podz was correct about the problem–or at least a significant part of it–being with the index.php.

    I went back to the original Trident template and if I do not change *anything* the page layout displays correctly. However, when I swap out the contents of the menu and rmenu—in the php file–the left menu continues to display correctly and the right menu is down at the bottom.

    What I did is cut everything between <div id=”menu”> and </div>, then paste it between <div id=”rmenu”> and </div> Then I put my site nav (text: I didn’t use the image map for this test) between <div id=”menu”> and </div> When I do this the right menu displays at the bottom on the page instead of the top. 🙁

    I tried swapping out the left and right float in the .css file, but oddly, that had no effect.

    So. The question is: If I want my site navigation on the left and the blog navigation on the right, how do I do it?

    I’ve CRACKED IT! Instead of swapping the *contents* of the divs in the index.php file, I swapped the position of the divs themselves and it works! Site nav is on the left. Blog nav is on the right. Both menus are at the top of the columns. The columns are even and extend the length of the page.

    Whew! 🙂

    Of course, right now I’ve got the default image instead of my own for the left column and I’ve got text nav instead of my image map, but the layout is displaying properly. I will continue to fiddle with it to see if I can get my images to work in this layout, but if I had to I could live with it as it is now.

    Thanks dawg and podz for their help. 🙂


Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘Lining up the columns??’ is closed to new replies.