Lining up the columns??

Can I suggest you either grab some different CSS or use the CSS in the examples to modify your own ?
Two links, slightly different looks:
Trident can be seen working here:
https://www.tamba2.org.uk/wordpress/Trident/index.php
Download:
https://pinksocks.co.uk/trident.zip

I think – if memory serves – that vesuvius is a max-width 3 column layout.
https://pinksocks.co.uk/vesuvius.zip

Either way, bith are very very easy to install (or remove) – but do backup your current css

I tried trident. Boy, have I tried trident. I have at one time or another modified practically every variable, trying to get it to work with my design.

There are two really BIG problems: I can’t seem to get both left and right menus to display at the top of their columns. AND I cannot widen the left column. I mean, I have altered every possible number, but that column will not budge. It *should* be slightly bigger than the imagemap for site nav. I’ve worked on this so much yesterday I’m punch drunk…got up early this morning and started working on it again. I *know* this is just a matter of minor adjustments, but I’m running out of ways to tweak it. I’m to the hair-pulling stage now. (sigh) My blog is at: https://www.gymshoesmusic.us/Amp/ Below you’ll see what the current .css looks like, if anyone wants to take a crack at it. I’m going to get breakfast and a shower. (BTW, I *did* try vesuvius, but there was a layout problem with the index and css when I installed the default! *Huge* gap between my last entry and the next…so I’ve gone back to battling Trident.)
Thanks for your help and suggestions.

body {
background: #000000;
font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
text-align: center; /* IE 5.5 hack */
}

#rap {
width: 1000px;
background: #FFB531 url(‘industrial1.jpg’) repeat-y left;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0px 0 60px;
border: 1px solid #565;
border-bottom: 0;
text-align: left; /* IE 5.5 hack part II */
}

#container {
background: transparent url(‘wp-images/bg1.gif’) repeat-y right;
}

#masthead {
background: #C60808;
font: italic normal 100% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 0 10px 0 60px;
border-bottom: 1px solid #565;
}

#main {
float: left;
width: 500px;
height: 100%;
}

#content {
float: right;
width: 700px;
padding: 0px 0px 0px 120px;
}

#menu {
float: left;
width: 300px;
padding: 0 100px 0 100px;

}

#rmenu {
float: right;
width: 195px;
}

I have made considerable progress since my earlier post. I now have the blog nav (which is on the right side) in the column at the top.

I solved the mystery of the left column not being able to be widened. I’s *visible* width is a function of the image size. I widened my image. However, the nav for the left column stubbornly remains at the bottom. ??

Also, I don’t seem to be able to adjust the entry text’s position any more. It’s scrunched up against the left column, but has a bit of room on the right. Any further adjustments (even a pixel or two) of the padding for content or main causes the blog nav in the right column to go back down to the bottom again. ??

So the outstanding issues are how to get the left column navigation to the top of the column and how to shift the entry text to the right a bit without messing up anything else.

I appreciate any help you can give me. I feel like I’m *very* close to sorting this out, but I’m inexperienced with css, so I’m having trouble finessing it. ??
Thanks! ??

The current .css:

#rap {
width: 900px;
background: #FFB531 url(‘wp-images/industrial2.jpg’) repeat-y left;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0px 0 0px;
border: 1px solid #565;
border-bottom: 0;
text-align: left; /* IE 5.5 hack part II */
}

#container {
background: transparent url(‘wp-images/bg1.gif’) repeat-y right;
}

#masthead {
background: #C60808;
font: italic normal 100% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 0 10px 0 60px;
border-bottom: 1px solid #565;
}

#main {
float: left;
width: 300px;
padding: 0px 0px 0px 0px;
height: 100%;
}

#content {
float: right;
width: 500px;
padding: 0px 0px 0px 202px;
}

#menu {
float: left;
width: 200px;

}

#rmenu {
float: right;
width: 195px;
}

If you do the math on your columns and wrap nothing adds up correctly and you will have problems. The wrap is set at 1000 px which will give any user of a screen res 800×600 a messed up viewing of your site. many still use this res, not myself but many do, even with the 1000 rap your columns exceed that. You need to space your columns correctly that will fit a pc screen.

PS your posts are going in the main div that is three hundred pixels either widen that to the content width of 500 or rename these two divs so that your posts go into the yellow content area where they would fit.

I would narrow you rap to 750 and you can place a background color in your page body to achieve the look for the entire screen no matter what res you site is looked at.

Thanks for your suggestions.

I *did* try to get the math right, I *did* make main and content the same number and I *did* narrow the rap, but all of those things either singly or together make it MUCH worse.

I currently have both content and main at 500. I’m not sure what you mean about the math adding up. Assuming that “content” and “main” are counted as one (since I cannot figure out what the difference between them), I’ve got a column that’s 195 & one that’s 200. Add in the 500 central column and that’s a total of 895…5 pixels short of my 900 rap—and I can’t decrease the rap because it messes up the right menu.

The original numbers for the Trident template were: rap 797, main 645, content 485, menu 150, rmenu 150…those numbers don’t add up either! And content and main aren’t the same number!

I *had* to increase rap to make the content on at least the right column display at the top of the column. If I decrease the rap to even 850, the right menu goes to the bottom of the page. ??

Using all the original widths in the Trident design gives me *both* columns with the navigation text at the bottom of the page.

I still haven’t gotten the left menu *up* to the top of the column. I’d like the design to match the overall site design as closely as possible. The modification I did of the original WordPress css looked good except the left and right columns did not end evenly with the middle text column. If I can’t get Trident modified to get that left menu to the top I may have to go back to it. ??

I’m open to more suggestions…

Sorry about the confusion what I mean by adding up is if you have a container/rap and it is 800px then everything inside the container should add up to 800px wide if it is over then you have spillage. A container is like a glass and can only be filled so much. Liquid layouts are flexible especially vertically, horizontal is not as forgiving due to screen size. IMO people do not like to scroll horizontal.

Different parts of your word press db call for different div tags so that is why some do not appear to add up. For your main index.php if the container is a fixed width then everything inside should add up.

Hope this makes sense if you need help post back

ps this will bounce your content into place make these changes to your main css div

#main {
float: left;
width: 510px;
padding: 0px 0px 0px 202px;
height: 100%;
}

I pasted in the code above and now it’s really screwed up! When I said I couldn’t change *any* numbers without messing things up, I meant it! ??

Since some number relate to div tags for the db, tell me which ones are the ones that are supposed to add up. I *should* be able to add. ??

BTW, the site right now is after the change to the #main. I’m going to leave it hashed for a while so you get a change to see it. ??

I really appreciate you help in sorting this mess out. It’s hard to believe I started with a decent template. LOL!

PS…In case you’ve lost track, here’s the current settings:

#rap {
width: 900px;
background: #FFB531 url(‘wp-images/industrial2.jpg’) repeat-y left;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0px 0 0px;
border: 1px solid #565;
border-bottom: 0;
text-align: left; /* IE 5.5 hack part II */
}

#container {
background: transparent url(‘wp-images/right1.gif’) repeat-y right;
}

#masthead {
background: #C60808;
font: italic normal 100% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 0 10px 0 60px;
border-bottom: 1px solid #565;
}

#main {
float: left;
width: 510px;
padding: 0px 0px 0px 202px;
height: 100%;
}

#content {
float: right;
width: 500px;
padding: 0px 0px 0px 202px;
}

#menu {
float: left;
width: 200px;

}

#rmenu {
float: right;
width: 195px;
color: #fff;
}

it looks how I think it should look now with the only exception being your navigaion that is down below instead of to the left column, I think this is how you want it in the left sort of steel gray column if I am right let me know so we can sort that out,

At least it is readable now where before your post were not contained

Funny thing is I can remove the content div and nothing happens except you lose a margin on your posts so this div appear unnessary. If you could send you index.php file it would be easier to figure out where you are going wrong but it appears as though this should be placed in the div that contains your industrial jpg.
{menu-narrow-new.jpg}

send me an e-mail if you wish with the index file at [email protected]

sachmo_007[at] yahoo.com

Well, sachmo and I worked on this and neither of us could get trident to work the way it should. ??

I did, today, finally get the site nav menu up to the top of the left column, but now the blog menu on the right side is down at the bottom of the page! ??

Could someone suggest something for me to tweak? Here’s what I’ve got up now:

#main {
float: right;
padding: 0px 0px 0px 0px;
height: 100%;
}

#content {
float: right;
width: 500px;
padding: 0px 250px 0px 0px;
}

#menu {
float: left;
width: 200px;
padding: 10px 0px 10px 8px;

}

#rmenu {
float: right;
width: 195px;
color: #fff;
}

Thanks! ??

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.gymshoesmusic.us%2FAmp%2F&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1

277: <div class=”clearer”> </div>

Look at the line above – it is stopping everything, then whatever follows in the code gets put underneath it.
Remove that line from your index, and see what happens…

Trident is a good template so I guess it’s a simple copy/paste error that has crept in.

.