Question

Id like to know why my inner wrap of the desktop css for this site is not working.

Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it’s not centered on the footer or main div

When I have innerwrap as it’s currently set margin:0 auto; and width:960px; you’ll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.

Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?

Answer 1

It shows Scrollbar because of the padding you apply in .innerwrap

Read this article about the Box Model

Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.

My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.

Remove this:

    .innerwrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

Keep This

.innerwrap {
    margin: auto;
    width: 960px;
}

Since you are applying fixed margins for you social icons they will show misplaced, so don’t use fixed margins for centering them, use percentage width instead.

you may want use a common class for aligning them

.social {
    background-position: center center;
    background-repeat: no-repeat;
    display: block !important;
    float: none;
    height: 150px;
    margin: auto;
    padding-top: 50px;
    width: 30% !important;
}

For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.

Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).

Use a web inspector like Firebug to track down styling errors.

Good luck Developer!