-1

First, you have to look at the situation. Here is the link- LINK. As you can see the sidebar is at the bottom side. I want the sidebar just below the header. It works perfectly when I open a post, but not at the home page. I tried changing margins, but no luck. I think an element is restricting the sidebar to be at the top. Can anyone give me a clue?

Akshay
  • 101
  • 1
  • 10
  • 1
    I see multiple id="main-wrapper" on the same level in the html. Probably need to remove the duplicates or change to a class if it's for CSS only and take the id="rsidebar-wrapper" out of main-wrapper container. That should get you toward the right track. Since main-wrapper width is 100%, every main-wrapper block will fill the width of the browser and push the next one down. – Liquidchrome Jun 20 '16 at 17:34
  • @Liquidchrome You was right bro. I did exactly what you said. I worked. Thank you very much. – Akshay Jun 21 '16 at 04:55

2 Answers2

0

According to other answers about CSS horizontal aligning, you should change the order of the float elements so they are the first ones. Ej.

<div id="main-wrapper">
    <div class="margin-1200">
        <div id="rsidebar-wrapper">...</div>
    </div>
</div>
<div id="content-wrapper">
    <div id="main-wrapper">
        <div class="margin-1200">...</div>
    </div>
</div>
<div id="main-wrapper">
    <div class="feature-posts">...</div>
</div>

Also, if you can afford the time and effort (and extra bandwith), the recommended way to align things in a page is using a framework with a grid system like pure, bootstrap or skeleton in which you can style divs like:

<!-- Bootstrap 3 example, based on a 12 column grid -->
<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

To have a main content column covering two thirds of the page and then a sidebar covering the other third.

Community
  • 1
  • 1
Roberto Linares
  • 2,215
  • 3
  • 23
  • 35
0

Change your structure to this -

<div id="content-wrapper">
  <div id="main-wrapper">...</div>
</div>
<div id="rsidebar-wrapper">...</div>

Change your css to this - 

.index #content-wrapper {
  margin: 0 auto;
  width: 1200px;
}

.index #main-wrapper {
  float: left;
  max-width: 767px;
}
Sanjay Jadon
  • 16
  • 3