Archived topic
Alignment of Components
2 replies · Started by Mary Pearson on February 22, 2015
Hi Tom,
It's me again, your friendly pest. I've started a website for a new client at http://mapenterprises.info/
I have, in order from top to bottom, video (in GP Hooks), header (logo), Nav Bar, Content, Copyright.
If you look down the left side of the page you will see that they are not quite aligned, nor are they aligned down the right side. They are each out by about 1 pixel, either to the left or right. The width of each component is specified as 960px. I've tried adjusting the widths but it doesn't help.
What do I need to do to have each part of the page line up correctly?
Many thanks!
This most likely has to do with the border attributes you've added.
When you add a border to an element which has a width, the border adds to that width.
A better idea is to apply the border to the element inside the element with the width.
For example, instead of applying a border to .main-navigation, apply it to .inside-navigation.
The same principal applies to padding and margin.
Play around with that and let me know if it fixes it :)
Ahhhh, makes sense! Thank you again so much Tom! Much appreciated!
