Jump to content
Ben

Aligning A Div Id Inside A Div Class

Recommended Posts

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. :) Edited by Ben

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...