Ourania Kusk Ourania Kusk - 1 month ago 6
CSS Question

Sidebar doesn't appear the same on all pages

I use a template on my Blogger and since it was too narrow, I adjusted the sidebar and the main posts column. It worked great but only for the homepage.

The problem is that the sidebar doesn't appear the same on all pages.

See one of the pages that the sidebar is not the same.




My current CSS code for the sidebar is:

#sidebar-wrapper {
border-radius: 5px;
color: #A8AAAC;
background:rgba(0,0,0,0.1);
float:left; margin: -2430px 150px 100px -120px;
width:40%;
}





and there is one more code sample for the sidebar, but even though I tried to change it nothing happened.

#sidebar-wrapper .widget {margin-bottom: 30px;}

#sidebar-wrapper a:hover{color:#fff}

#sidebar-wrapper h2 {
color: #C8CACC;
font-size: 14px;
letter-spacing: 2px;
line-height: 1.4;
margin: 30px 0 10px;
font-family: Oswald,Arial,sans-serif;
font-weight: bold;
text-transform: uppercase;
}

Answer

The issue you're having is because you are controlling content with margins instead of controlling the dimensions of the main page id=wrapper div and all its children. Your header is 1000px wide but your wrapper is 740px wide. First make them both same width.

Second, the main-wrapper and side-wrapper margins need to be removed.

Using margins to adjust content differently on each page is a very bad practice. Next adjust the percentages of both wrappers to add up to a total of 100%. I suggest you use width:30% for side-wrapper and 68% for the main-wrapper (why leave 2% from the main-wrapper is to give a bit space in between both wrappers. You can use margins to give space but make sure to negative that margin from the width percentage to keep both wrappers in same line.)

With a few more tweaks, you can build a clean CSS settings that will ultimately fix all the pages with the side-bar pages.

Comments