How to create a simple layout with sidebar - html

Question

I'm looking to create a right sidebar on my page, however after going over multiple guides and I am still a stuck. What's the best way and most browser/mobile-friendly way to create a sidebar with minimal code?
HTML
<div class="wrapper">
<section id="content" class="content">
{squarespace.main-content}
<div id="sidebar" class="sidebar">
<squarespace:block-field id="sidebarBlocks" columns="12" />
</div>
</section>
And CSS
.wrapper {}
.content {}
#sidebar {}

Answer 1

Design your sidebar as a web usercontrol and put it inside the following div structure on to the masterpage.
<div id="parentContainer">
<div id="sitebody" >
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</div>
<div id="sidebar">
<uc1:ucSideBar ID="ucSideBar1" runat="server" />
</div>
</div>
Touch up the divs using css;
#sidebar
{
float: left;
height: 80%;
width: 250px;
}
#sitebody
{
float: left;
padding: 0 10px;
width: 60%;
height :80%;
}
#parentContainer
{
clear: both;
float: left;
width: 1500px;
}
to see this in fiddle

Answer 2

A better approach would be to use a CSS table layout with a fixed or dynamic width sidebar like this fiddle. This doesn't require any hacky float clearfixes and is cross-browser compatible.
.page {
display: table;
width: 100%;
max-width: 100%;
border-collapse: collapse;
}
.content, .nav {
display: table-cell;
}
.content {
width: 100%;
}
.nav {
min-width: 200px; /* Specify a fixed or percentage width or min-width here if required */
}
/* Stack at smaller widths */
#media screen and (max-width: 640px) {
.nav {
/* You could stack sidebar ontop of content using table-header-group instead */
display: table-footer-group;
}
}