Aligning A Div Id Inside A Div Class

[Ben]

Hi :)I'm trying to align the ID named touch to the right of the page, inside the class named page-title but I've had no luck.I've tried using float:right; as well as adjusting the margins but I can't seem to move the text any further to the right.My HTML is:

<div class="page-title"><div id="touch">Does this look interesting? <span class="touch">Get in touch!</span></div><h3 class="fontface">My Portfolio</h3></div>

My CSS is:

div.page-title {position:relative;margin-left:auto;margin-right:auto;width:1000px;background-color:#C96;}#touch {position:relative;text-align:right;}

If anyone can help it will be appreciated.

[dsonesuk]

the float:right used for the #nav li has transferred down to the div.page-title element span, causing it to position itself left of the home menu li. To restrict the float right to only the li element within #bar container assign overflow: hidden to it.

#bar {	height: 100%;	margin-left: auto;	margin-right: auto;	overflow: hidden; /*added by dsonesuk*/	position: relative;	width: 1040px;}

[Ben]

Thank you very much. :)Just wondering but is it possible to apply the overflow: hidden; as a general style? If yes then would you recommend it?

[dsonesuk]

I suppose you could... by using for example div {overflow: hidden;} but you will have to remember any div container with a fixed height, will only the show content within this height, as the rest will be hidden. But definitely NOT by using *{ margin:0; padding:0; overflow:hidden;} as this will affect the html and body elements, and prevent scrollbars appearing when content exceeds your browser window height, you could reset the html, body overflow styling to there previous state, but i think you will find some browsers use different overflow styling to others, and you will have take that into consideration. Personally i only use it when and if required, usually for outer container elements, as in #bar, which was the outer container element for the floated ul,li menu elements. What I did see, which should be avoided is the use of position: relative to position an element using properties left, top etc. I would stick to using margins and padding, as using positioning is likely to cause odd alignment results across different browsers.

[Ben]

I'll just use it in this case then, thank you.