Right align a menu and change from 3 col to 2 col layout

Hey all,

I have a horizontal menu I want to right align in a container - I tried:

margin-top: 25px;
margin-right: 0px;

thought that'd work, but it didnt...

Also, say my index page is a 3 col layout, some of the link pages I'd like to be 2 col - how do I change from 3 to 2 col?

thanks,
Leo

 

1. Provide a link
2. Learn what margins are.

It's kinda hard to tell without looking at the source code, but I'm assuming you want something like float:right;.. just remember to clear the float afterwards.

 

you need to use float: right; or float: left;

 

Long story but I don't have a live link and won't have either!
As I said... long story!

Thanks for the advice... I do know margins but presumed if I relatively positioned it - margin-right: 0px; would work?

Basically, I have the page laid out like this:

TITLE HERE
SPPPPPPPPPPPPAAAAAAAACCCCCEEEEE - HORIZONTAL MENU MEANT TO BE HERE

Also, the switching between 3 and 2 columns?

 

Ah, but leo, margins don't make elements stick to one side or the other of the container or page. That's what soulscratch means. You have a big page somewhere with a width of maybe 1024 or something, and inside that some little menu thingie, setting the right margin to 0 won't make it stick to the right side. In fact, the default for things if they're blocks is to hug the left side of their containers and if they're inline elements, to ride up on the right side of whatever's to the left of them.

Since you now know that everything is really trying to hug the left side, try adding a huge left margin and see how it pushes your menu to the right.

float: right would of course be a better option if you dunno how wide the page will actually be since then otherwise (if you use just a large left margin) if you have a user with an ever wider browser window, the links will now look to be in the middle, and a smaller browser may make them go right off the side. Float:right will make it want t hug the right side of the container... then you could use margin-right to push the linksbox a bit away from the right side to give it some breathing room.

Edit: you could also do the float:left thing with the huge negative margins trick, but that's tricky (or it was for me before it finally clicked).

 

Hey buddy how are you?

Yeah I tried the margin-left: 300px; but as per usual it was fine in FF and off by about 5px in IE!

Ok so its a case of float: right;
in the next div, float: clear;???

I'll try rig something (a live link) up and see if it makes any sense!

Thanks blokes!

 

Next div would have
clear: (side the float was on);

like if the thing's floated right
next div says
clear: right;


Before saying IE is off by 5 pixels.... do you have the universal selector at the top of your css file first?? The * {maring:0; padding:0;} thing?

 

I fought with this one too.

Align your container content to the right:
div id=container
ul id=menu
here is menu
/ul
/div

and in css:
#container { text-align: right;}
#menu { text-align: left;}

 

If you don't know what you're doing, I suggest you TEST IT FIRST.

Check these test pages out. Made em just for you.

http://205.209.146.77/without-clear-right.html
http://205.209.146.77/with-clear-right.html

 

Well also, the text-align might work for IE5.5 with sh*tty doctype, but it won't do anything on my browsers except align the text : ) If all the containers were 100% width, then maybe the text would go aaaall the way to the right side, but I'm sure Leo's menu is only wide enough to fit all the menu stuff in it. So Leo'd still have a left-aligned menu box with left-aligned text.

Text-align is improperly used by IE5.5 and older (and I've used it also for centering pages in case that browser should show up), and I think Crusty Old Guy said something like a good doctype would even make that one behave.

 

Meh. One shouldn't be improperly using TEXT-ALIGN to align things that are NOT (inline) text.

And IE5 is dead.

 

Dude, I understand you have something against "Dead" browsers, but chill!!! (see, I can do Bold text too!).

I clearly stated that I had the same issue and I quickly explained how I solved it, so please ease on the Prozac!

 

soulscratch is one of the Crusty Old Guys Who Know Stuff here. There's a couple of them. I just take their knowledge and ignore any emotions I think I see. They're not really angry anyways.

 

Well, I'm one of the Young Guys Who Also Know Stuff and don't like to be "yelled" at when I try to help people, even when people don't agree with my advise.

If I'm wrong, correct me. I will always accept correction. Just don't give me the feeling that you are so all-knowing and I am just another stupid idiot who thinks he knows something!

Simple rule of life: Respect people to get respect in return!

Heb ik gelijk of niet? (am I right or not?)

 

<?php
$soulscratch = new Person();
$soulscratch->age = 19;

echo ($soulscratch->age>30 ? 'Crusty old guy' : 'Young guy.');
// output = Young guy.

?>

Code (markup):

 

yeah, Dan's young too but he gets the moniker : )

Ja, jij hebt gelijk. Maar veel mensen krijgen ss z'n tong en ik denk, dit is slechts maar een forum. Maar, ja.

I thought they spoke French in Guyana ?

 

I live in Guyana (where they speak English btw) but I'm from Suriname.

Back to the topic:

I have this method from centered nav lists. So I used it for right navs too!

 

http://205.209.146.77/now-what.html

To get the #menu to stay on the right, you could

a) float it to the right with NO explicit width and it will be shrinkwrapped unless you explicitly state a width
b) float it left and give it a large left margin
c) absolutely position it and set top and right values relative to the container division
d) position:relative on the #menu and set a left value that's equal to however much space you need on the left side, and set a width on the menu.. the menu's width and the left: value must not be more than the container's width or it will overflow unless you set the parent element to hidden
e) position:fixed (and I won't even get into that.. not even consistent crossbrowser.. not safe to use but you can still accomplish it in modern browsers using this method)

Those are the methods I can think of (that work in modern browsers in almost-standards or STRICT mode). So, not sure how text-align would do it unless you're testing in quirks mode IE6/IE5.. or if you forgot that you set a float on the element. And didn't you mean text-align:right; on #menu ? Why left? I can see how you might have thought it centered the element, but in actuality it centered only the text inside and there was no adjacent elements.. just elements that came after (the #menu) on a new line unless they were not in normal flow.

Please show me how you did it.

 

Seriously, I have decided not to ever challenge you on anything. Hell I might even ignore you all together. Why? As I said before: Learn to respect people and stop acting as if you are the all-knowing and others are stupid.

I lost my appetite for this topic. Don't even know why I responded the second time!

 

My apologies (sometimes I can't help it) .. I can get a little overheated when it comes to coding and standards.