Which approach is better for responsive design with fixed width sidebar? - html

Question

so which approach is better for responsive design with fixed width sidebar ?
both are working normally, and now some people says that the second approach is better, some says first...
or it is all the same ?
approach 1: http://jsfiddle.net/56erp1my/33/
<div id="wrap">
<div id="header">Header</div>
<div id="sidebar">Static LEFT sidebar</div>
<div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>
<div id="footer">Footer</div>
</div>
#wrap { padding: 10px; max-width:1000px; margin: 0 auto;}
#header {background: #0f0;}
#sidebar {width: 200px; float: right; height: 200px; background: #ddd;}
#content {margin-right: 210px; min-height: 100px; background: #ddd;}
#footer {clear:both; background: #0f0;}
approach 2: http://jsfiddle.net/56erp1my/35/
<h2>With Content:</h2>
<div class="wrap">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.wrap {
background: #eee;
padding: 10px;
max-width: 960px;
overflow: hidden;
margin: 0 auto;
}
.left, .right {
padding: 5px;
}
.left {
background: tomato;
display: table-cell;
width: 9999px;
}
.right {
background: green;
width: 300px;
float: right;
}
Thank you

Answer 1

The second approach seems better in terms of maintenance. This is why:
If you want to change the width of the right sidebar in the first approach, you will also have to change the margin-right of the element with the class content.
While in the second approach, if you change the width of the right side bar, the content on the left will resize and re-position itself automatically.