Centering main next to a sidebar - html

Question

I apologize in advance if this has been asked before but unfortunately I can't seem to find an answer - maybe I used the wrong terms while searching.
However. I am building a very simple website to display my portfolio and I decided to put a fixed sidebar on the left and the main contents scrolling on the right. Let's say the "active part" of the website begins where the sidebar ends, and I need my contents centered between the end of the sidebar and the end of the browser window.
I float the contents to the right and manage to make it look like I want it to but only by setting specific margins.
As you can see the result viewed on my laptop, which is correct on this resolution, but if the size of the window increases, the contents remain, obviously, on the right, and the left margin becomes bigger than the right margin which I don't want.
Is it possible to make the main setting itself at the center so that the two margins are even on different resolutions?
HTML
<div id="main">
<div class="title-contents">
<h1 class="page-name">Stuff I Make</h1>
<div class="gallery-icon"><img src="images/grid-icon.jpg"/></div>
<div class="gallery-icon"><img src="images/line-icon.jpg"/></div>
<div style="clear:both"></div>
</div>
CSS
#main {
background-color:#fff;
width:780px;
height:100%;
margin:60px;
float:right;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
}
Thanks to everyone of you who will read and eventually answer and please forgive my clear lack of knowledge, I started doing this a couple of weeks ago so if this question is beyond stupid just try to understand, ahah ;) Thank you!
Veronica
EDIT: fiddle...I hope it's clear. As you can see the main sticks to the right because I set it to float:right, but if I set it to float:center it stays in the middle of the page goind UNDER the sidebar. I want it to always stay centered WITHIN the space next to the sidebar.
To answer the question, the sidebar has a fixed width. Thanks!!!! :)

Answer 1

When using a percentage layout, I suggest you to use TJ's answer.
If you want the sidebar to have a fixed width, I made you this solution, using absolute position on the main part:
HTML:
<div id="sidebar">
sidebar
</div>
<div id="main">
<div>
content
</div>
</div>
CSS:
#sidebar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
background: lightblue;
}
#main {
position: absolute;
top: 25px;
right: 25px;
bottom: 25px;
left: 175px; /* width of #sidebar + extra margin */
}
#main > div {
width: 100%;
min-height: 100%;
background: lightgreen;
}
What it does: the sidebar has a fixed place and a fix width. If you want you can add margin to it by playing around with the top, left and bottom position.
The #main div is placed absolute. The top, right and bottom position are all set to the same number (in the example 25px). The left position is the width of the sidebar plus the extra margin (in the example 150 + 25 = 175px;
Also see this demo.
Footnote: the extra div inside #main is for when the length of the content is bigger than #main, and the background will expand. See this extra demo. In case it all fits inside it, just remove the div (and put a background on #main).

Answer 2

You need a container for the sidebar and content. You can fixed position the sidebar and center align the content in the remaining space by applying padding-left equal to the width of sidebar and margin:0 auto for the container.
Following is a quick responsive setup:
HTML
<div id="page">
<div id="sidebar"></div>
<div id="main"></div>
</div>
CSS:
#page{
height:100%;
padding-left:10%; // equal to the width of sidebar
}
#sidebar{
position:fixed;
top:10%;
left:0;
width:10%;
height:80%;
}
#main {
width: 80%;
height: 100%;
margin:0 auto; // center align horizontally
}
Try resizing the output window in following fiddle:
Demo

Answer 3

Not sure what you are looking for but maybe this?
HTML
<div class="one">
Here's room for the side menu
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
<li>option 6</li>
<li>option 7</li>
<li>option 8</li>
<li>option 9</li>
</ul>
</div>
<div class="two">
<div id="main">
<div class="title-contents">
<h1 class="page-name">Stuff I Make</h1>
<div style="clear:both"></div>
</div>
</div>
</div>
CSS
#main {
border: 2px solid red;
width:80%;
height:100%;
margin: 0 auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
box-sizing: border-box;
}
.one {
border: 2px solid green;
float: left;
width: 20%;
display: block;
box-sizing: border-box;
height: 100%;
}
.two {
border: 2px solid blue;
float: left;
width: 80%;
display: block;
box-sizing: border-box;
}
Here's a Fiddle