I'm looking to set up a webpage with a single sidebar and content area. Here's how I envision it:
<div id="mainWrapper">
<!-- Sidebar -->
<div id="sidebar">
<p>Sidebar</p>
<p>Sidebar</p>
<p>Sidebar</p>
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<!-- Content -->
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
Here is the CSS stylesheet that I plan to use:
#mainWrapper {
background: #F6F7F9;
overflow: hidden;
border: 1px solid #D6D8D8;
}
#sidebar {
float: left;
width: 180px;
}
#content {
background: #FFFFFF;
border-left: 1px solid #D6D8D8;
padding: 5px;
margin-left: 181px;
overflow: hidden;
}
However, there seems to be an issue with the content area not displaying properly in Safari browser. It leaves a large margin on the right side.