• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 97
  • Last Modified:

Need help bringing down one line <p> in the footer

Hi, I'm using VS2012.
I've been trying all morning to vertically align this one line of text, very frustrated.  It's at the top of the first div, which has a color background.  I tried verticalAlign, and margin-top but it won't move at ll.  I'm attaching a screen shot of Firebug and would really appreciate help in fixing this.
footer.png
footer2.png
Site.css
0
lapucca
Asked:
lapucca
  • 5
  • 5
  • 2
1 Solution
 
GaryCommented:
What's wrong with text-align:center

Post a screenshot of the webpage.
0
 
lapuccaAuthor Commented:
text-align:center
This centers the text Horizontally.  The problem I have is vertically, this paragraph stock to the top of my footer div/background image
Attached is a screen shot of the footer area.
Thank you
footer3.png
0
 
GaryCommented:
The screenshot makes no sense
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Ammar GaffarSoftware EngineerCommented:
Try padding-top.
0
 
lapuccaAuthor Commented:
The screen shot is the footer area that has a background image, repeat across the entire screen.  

What's the difference with padding-top.  The margin top just grew space upward and went above the div that contains the paragraph.   Thank you Ammar.
0
 
Ammar GaffarSoftware EngineerCommented:
Padding is the space inside the border of your container,  but marigin is the space outside the border of your container
0
 
lapuccaAuthor Commented:
Ha!  Thanks Ammar!  That is such valuable information to learn.  Now the difference is clear to me.  Thank you.
0
 
GaryCommented:
Padding is the space inside the border of your container,  but marigin is the space outside the border of your container
Not quite correct, it depends on the box model used, if you use border-box then everything is inside the element. And this is the much preferred method

http://css-tricks.com/box-sizing/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
http://css-tricks.com/international-box-sizing-awareness-day/
0
 
lapuccaAuthor Commented:
Thanks Gary.  I need to read that a few more times to get it.
0
 
GaryCommented:
border-box - your element never grows beyond the size you set, if it's 100px wide and you add a 10px padding then you have 80px wide available space to work in, if you add a border then the same applies
But margins are added to the element size

content-box - if the element is set to 100px then no matter the margin, padding or border you always have 100px, but your element will be 100px + margin + padding + borders. So it will be bigger than 100px
When designing websites this becomes a real pain.
0
 
lapuccaAuthor Commented:
Okay, I got the border-box the way you explain it.  Padding and border cuts down the work space.  The margin is outside of border which is outside of padding.

Content-box seems easier to understand since it's all extra around the element.

Thank you Gary.
0
 
GaryCommented:
Content-box seems easier to understand since it's all extra around the element
Depends on how you design, if you set an element to 100% width (or use any percentage based layout) and then add padding and margins then it is bigger than 100%, with border-box it's still 100%.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now