Footer is not aligning to the right

Hello

I am building a page, and everything seems to be looking alright except that the footer is sitting in a funny area. See the image below:



As you can see, the "Copyright 2011 Royal Nannies and Domestics" is not aligned to the right. Here is my CSS for the footer, as well as the left content box and right picture box:

#textbox{	width: 580px;
	height: 100%;
	min-height: 325px;
	background-color: #f9f6d1;
	position: relative;
	margin: 85px 0 30px 45px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: left;
	padding: 10px;
	font-family: Arial;
	font-size: 12px;
	border: 1px solid #000;
}
#picture{
	background-image: url('images/side_pic.png');
	width: 311px;
	height: 353px;
	position: relative;
	float: right;
	bottom: 385px;
	z-index: 999;
	clear: both;
	right: 20px;
}
#footer{
	text-align: right;
	margin-top: 50px;
	font-family: Tahoma;
	font-size: 12px;
	width: 910px;
}

Code (markup):

Yes, I'm using messy code now, but that's because I can't seem to figure out why the footer won't move!

Any suggestions would be great.

Thank you!

 

It would be easier to tell what your problem is if we knew the html of your website.

Maybe a tip I can give you is that is your footer's text is contained in a div, a span or a paragraph which size is the same as your text, text-align will not have any effect. To correct this problem, you can raise the width of your footer block or float it to the left. I think you can use margin-left:auto as well... If you'd like to have it in the middle you can use both margin-left:auto and margin-right:auto.

Anyway, I hope I helped you.

 

maybe if you change you're width also into %?

 

Hello, here comes the HTML:

Also, here is the CSS for the "content" div:

Thanks!

 

Have you tried float:right instead? on the div. That should do the trick.

 

Hmm..thanks for the tip. However, it moved to the bottom left of the page instead of to the right..

 

Possibly add either a margin or padding to the footer div to move the copyright across the page which should work.
From the code you have provided I can't really help you much more.

 

Sorry about that. Here is the page with the full html and css:

The footer is still sticking to the bottom left - although it's float:right already.

Thanks!

 

You need to add the container as you have the container div in the HTML but not in the CSS.
I have been playing around using firebug for this and am having no luck to get it the right, it just stops at the center and won't move across the page even with padding.
I have tried moving the footer outside the container but still nothing!

Leave it with me though...

 

I think I was able to come up with a solution! Well it was more like, almost changing your whole CSS...

I think most of the problems you had were because you used so many position:relative in your CSS and I really try not using these too much. The moved elements are displayed somewhere else but are still considered to be located at the same position in the flow. Which is why you had that weird space in the bottom of your page and why your footer wouldn't align.

I'm not sure why you were using a unordered list (ul) for your menu, aside that it is an method often used, but I removed it because it was having some other strange top and bottom margin problems which was adding a space between your menu and the header and I couldn't find which element had a top margin.

I would also recommend using the new CSS3 feature for custom fonts instead of that javascript library. Your font has to be ttf and you will need to convert it in oet with this website ttf2eot.sebastiankippe.com (well that's what I used.) oet font is used by IE while ttf is used by all the other browsers. It is very simple.

Code for custom fonts

@font-face{
    font-family:familyname;
    src: url('filename.eot?') format('eot'), url('filename.TTF') format('truetype');
}

p{
    font-family:familyname;
}

Code (markup):

The CSS

body{    background-color: #f9f6d1;
}


p{
    margin:0 10px 10px;
}


.layout{
    margin:0 auto;
}


#header{
    border-color:orange;
    background-image: url('images/header_img.gif');
    width: 1010px;
    height: 230px;
}


#menu{
    border-color:blue;
    background-color: #d4b545;
    height: 35px; 
    width: 977px;
    padding-top:15px;
    padding-left:25px;
}


#menu a{
    color: #981793;
    margin-left:20px;
    margin-right:20px;
}


#menu a{
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    color: black;
}


#menu a:hover {
    color: #fff;
    text-decoration: none;
    background-color: inherit;
}


#menu a:visited{
    color: black;
    text-decoration: none;
}


#active{
    color: #fff !important;
    text-decoration: none;
}


#content{
    overflow: hidden;
    background-image: url('images/midbg.png');
    width: 994px;
    /* min-height: 616px; */
    border: 4px solid #d4b545;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


.title{
    margin-left:45px;
    font-family: Tahoma;
    font: 2em "Times New Roman", Times, serif;
}


#textbox{
    float:left;
    width: 580px;
    min-height: 325px;
    background-color: #f9f6d1;
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 0px 0 30px 45px;
    padding: 10px;
    text-align: left;
    font-family: Arial;
    font-size: 12px;
}


#sidepic{
    float:right;
    background-image: url('images/side_pic.png');
    width: 310px;
    height: 365px;
}


#footer{
    clear:left;
    text-align:center;
    font-family: Tahoma;
    font-size: 12px;
}

Code (markup):

The HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Royal Nannies & Domestics</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="Stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
    <div id="header" class="layout"></div>
    <div id="menu" class="layout">
        <a href="#" id="active">Home</a>
        <a href="#">Sub-Page</a>
        <a href="#">Sub-Page</a>
        <a href="#">Sub-Page</a>
        <a href="#">Sub-Page</a>
        <a href="#">Sub-Page</a>
        <a href="#">Sub-Page</a>
    </div>
    <div id="content" class="layout">
        <h1 class="title">About Us</h1>
        <div id="textbox">
            With over twenty-five years experience in early childhood development and staffing, we understand the dynamics in creating balance between a home and professional life.  In fact, we understand it so well that we decided to create a business to assist others in experiencing a positive work/life complement.  We are mothers, early childhood educators, and corporate professionals that believe the best support for your children and home comes from a collaborative rapport grounded in trust and clear communication between the families and the professionals.
            <br/><br/>
            We have extensive experience in child care human resources; the education sector, as well as work/life corporate consulting. As parents, we understand the demand to find responsible and professional candidates. We apply our years of expertise to ensure that only the most experienced and committed professionals are referred to your family and home.
            <br/><br/>
            Our professionals possess a myriad of skills, many are bilingual, and the majority have college degrees. If you are in search of a candidate with experience in special needs, or a specific language; we can assist. Fewer than 10% of applicants are selected to interview; demonstrating our commitment to refer only the most qualified candidates. In addition, our candidates are personally assessed for the highest level of integrity and morals. Through our national recruiting affiliates, we are able to cast a wider net and provide profiles of the best candidates.
            <br/><br/>
            Royal Nannies and Domestics follows through with our placements to ensure you have the most suitable match for your home. We value the relationship with our clients and look forward to supporting your individual family needs.
        </div>
        <div id="sidepic"></div>
    </div>
    <div id="footer" class="layout">
        Copyright 2011 Royal Nannies and Domestics.
    </div>
</div>
</body>
</html>

Code (markup):

And if you absolutely want to use that unordered list

#menu{
    background-color: #d4b545;
    height: 50px; 
    width: 1002px;
    margin: 0 auto;
}


#menu ul{
    margin:0;
}


#menu li{
    list-style: none;
    float:left;
    margin-top: 5px;
}


#menu a{
    display:block;
    padding:10px 20px 8px 20px;
}


#menu li a{
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    color: #000;
}


#menu li a:hover {
    color: #fff;
    text-decoration: none;
    background-color: inherit;
}


#menu li a:visited{
    color: #000
    text-decoration: none;
}


.active{
    color: #fff !important;
    text-decoration: none;
}

Code (markup):

 

Yes! That works perfectly! Thank you so much for your help. Rep left =)

 

All you had to do was remove the width set on the footer and set 'text-align:right'.

 

Well I'm sorry to contradict you but I just tried exactly what you said on chrome by changing the code live and it's not working. It doesn't even do anything.

 

In the original markup? Works for me.

 

Oh well I searched for the solution and tried yours on the page at the link he gave ( 7573.a.hostable.me/dev/rnadinner ) and yours didn't work.. It was still a bit too much on the right.

But I tried it again and took a screenshot to manually check if it really was centered and it was.

Then I tried AGAIN to make sure and it wasn't aligning in the center anymore. No idea why it did center that time and it doesn't anymore. Tried to see if it was because I zoomed in or out but didn't make a difference.

Anyway now no matter what I do it still is not really centered by removing width and adding text-align. But text-align isn't doing anything from the start because of the left float which makes the div shrink to its content. And even if I remove the float and use text-align center or right it isn't centering properly...

 

I didn't see he had a link and wasn't working with that. The footer being so low is a mystery. Is js messing with this? Don't have time to look further.

 

Nah I doubt its because of the JavaScript. It's only some font rendering script. In a earlier post I said it was most likely due to all that relative positioning. I think there's a float on his div with the background image and, if you remove the positioning you'll see where all his elements actually are in the page flow.

 

i am 99% sure that you have got #footer this id some where else also, and that is randomly applying to your footer section. plz chk.

 

yeah sometime it happens