0

I am having an issue with the horizontal line I have placed in my footer. I have another on my header but it is working fine. The issue begun when I stuck the footer to the bottom of the page. The horizontal line displays all the way across the screen rather than just in the container.

CSS :

footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}

#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;


}
#mcp:hover {
transition: width .5s;
width:225px;
}

HTML:

<footer>
<hr>
<p>Copyright &copy sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'          
src='images/mcp.png'</a></p>
</footer>

Issue pic : http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a

Aaronstran
  • 131
  • 7
  • I suspect there are more styles being in play than just the ones you have posted — can you replicate your issue minimally with a fiddle? – Terry Jul 03 '14 at 06:10
  • First time using jsfiddle. http://jsfiddle.net/#&togetherjs=jMtvGMqjbc – Aaronstran Jul 03 '14 at 06:17

2 Answers2

1

Although I don't recommend using Absolute Positioning for your footer. Here is the solution with your code. Position absolute breaks elements out of the documents normal flow.

The solution here makes the footer 75% same as the container, and then recentering it, with margin-left and margin-right. 

footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
YourFriend
  • 410
  • 1
  • 5
  • 13
  • Thank you very much, this worked. I am new so I don't know better, but if you don't mind. What can I use besides absolute for this? – Aaronstran Jul 03 '14 at 06:21
0

The problem is the following bit from your CSS file:

footer {
    ...
    width:100%;
    ...
}

This is causing your footer block to stretch across the entire width of the screen. Since the text is centered, you aren't able to tell, but if the text was longer, it would also extend beyond the boundaries of the grey section.

Simply change the width setting to the pixel width of the grey background (or smaller if you want some padding) and your problem will be solved. Assuming, for example, it's 950 pixels:

footer {
    ...
    width:950px;
    ...
}

Edit

Since you're also using absolute positioning, you may have issues centering the footer after making this change. View this question for a possible solution: How to center absolutely positioned element in div? or don't use position: absolute and add margin: 0 auto; to align the footer in the horizontal center.

Community
  • 1
  • 1