Unsure if container hierarchy is causing me positioning issues - php

Question

Im building my first website and this is first time asking for help. I am unsure of how to position the sidebar widget area of my site in the position I want. Im working on making my the site fully responsive. What I am trying to accomplish is get the sidebar to "hug" the content area so they are always next to each other with a small 20-35px margin in-between them, and as screens get larger I want them to stick together. I came across this website http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com.
my site has the main site content area with two divs, the main content and the sidebar. I tried get the to position how i want using percentage margins, played with clears, clearfixs and everything else. I was wondering if I am approaching this wrong or if the DOM is causing issues with style hierarchy. If you have any ideas I would be greatful. been pulling hair out on this for a couple days now.

Answer 1

You need to place your main content area and your sidebar content inside a container element. Then use media queries to determine a breakpoint for when the sidebar should re-flow.
Below is the basic markup of my suggested approach. The main content and sidebar content are the two siblings of a container element. They are floated left and have a percentage width applied to each. A media query is used to determine when the two columns of content should be side-by-side or stacked.
<main class="cf">
<div class="content">Main Content</div>
<aside class="sidebar">Sidebar</div>
</main>
main {
background-color: #ddd;
min-height: 400px;
}
.content,
.sidebar {
float: left;
width: 100%;
}
.content {
background-color: #ccc;
}
.sidebar {
background-color: #bbb;
}
#media ( min-width: 480px ) {
.content {
width: 70%;
}
.sidebar {
width: 30%;
background-color: #bbb;
}
}
The clearfix and background colors used above are only in place for my demo and can be omitted.
jsFiddle: http://jsfiddle.net/vj9zq0oq/
Re-size the jsFiddle to see the content columns re-order.

Answer 2

I'd try to stay away from float if possible. Try this out instead. The display-block places them side by side and will help with the responsive feature because the sidebar will automatically jump down when space runs out, and text-align:center makes them stay in the middle of the page at larger sizes.
.site-content {
padding-bottom: 4em;
background: #f0f0f0;
text-align: center;
}
.content-area {
display: inline-block;
}
.site-content .widget-area {
width: 380px;
padding: .3em 0 .3em 4em;
background: #ffffff;
display: inline-block;
margin-left: 20px;
vertical-align:top;
}