Padding within a div plus a few other questions

[DezUk]

I am still working on a small taxi website and am nearly finished but have a few final bits to do to tidy it up. I am struggling with the padding within the footer and header, as you can see the footer text is right up against the edge of the footer div. How can I get this to show with padding, when I add padding to the footer it sets it out of line.

I am also looking to incorporate web fonts as the header text (rather than an image) but I am not sure how to achieve this. How do I split the text so it floated left for the title and floated right for the phone number?

Finally in the contact section I would like to use a contact form that allows the user to select from a drop down i.e. General Enquiries, Bookings, Customer Feedback etc. Can anyone recommend a good jQuery script to use?

http://www.rdoyle.info/projects/gordonstaxis/v3

Sorry for all the questions, still learning

 

[touch]

I am still working on a small taxi website and am nearly finished but have a few final bits to do to tidy it up. I am struggling with the padding within the footer and header, as you can see the footer text is right up against the edge of the footer div. How can I get this to show with padding, when I add padding to the footer it sets it out of line.

I think this happens because of the auto margins.
I would add another div inside the footer to hold the text which you can add a margin to but it can also be done by adding the margin directly to the link:

#footer a {
margin-left:10px;
}

I am also looking to incorporate web fonts as the header text (rather than an image) but I am not sure how to achieve this. How do I split the text so it floated left for the title and floated right for the phone number?

Again, i'd stick them in divs. One floated left and one floated right.
(remember a clearing div after them as well <div style="clear:both;"></div> )

 

[gord]

You could do as above for the footer and use a margin on the child elements. But if you want to add padding you'll also need to set the box-sizing to border-box in order for the padding to be incorporated into the width rather than added to it.

 

[Tripnologist]

Your wrapper has a width and divs are block elements, so take up all available space anyway.

Remove the widths from .header, .navigation, .background and .footer. They are now the same width as your wrapper. Adjust your wrapper to fit.

Without specifying a width to your header and footer, you can now add padding as you'd like without worry.

As has been suggested though, box-sizing: border-box is really handy, if you're only worried about IE8+.