Get two aside sections to float left with fixed width CSS - css

Question

I'm trying for two sections to float aside of the main column on the right side. The sections should be of a fixed width and the main should be fluid. This is the closest I have come. Problem is that the main does not change its size. If it where one aside section I had used the holy grail, but that doesn't work either.
[edit]To clarify; the HTML cannot be changed (much). Left and right need to stay after main which is best for screen readers and seo. The asides are actually the left and right column if content is wide enough. So only specific widths get this layout I am trying to achieve.[/edit]
https://jsfiddle.net/TR2SD/1/
<div id="container">
<div id="main">
main contents<br>with some content
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
and the CSS:
#container {
border: 1px solid red;
width: 100%;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
position: relative;
width: 100%;
float: left;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:220px;
position: relative;
z-index:2;
}

Answer 1

For one sidebar, you can position in by accounting for its width using padding on the container and a margin on the main section:
.container {
padding-right: 200px; /* Matches sidebar width */
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.sidebar {
width: 200px;
margin-right: -200px; /* Matches sidebar width */
float: right;
}
For a left and right sidebar with a scaling center you can use a similar technique:
.container {
padding-right: 200px;
padding-left: 200px;
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.left-sidebar {
float: left;
width: 200px;
margin-left: -200px;
}
.right-sidebar {
float: left;
width: 200px;
margin-right: -200px;
}
.left-sidebar, .right-sidebar {
display: none;
}
Here's the final result on JSBin. You'll need to resize the page to see the different views.
Note that an auxiliary sidebar for small screens was used in the example above as it is inordinately difficult to use CSS to render elements out of DOM order.

Answer 2

I finally answered it by utilizing an inside element of the #main. What I need to check is compatibility of this fix. And what haapens to the backgrounds assigned to #main.
https://jsfiddle.net/TR2SD/5/
I added an "inside" element
<div id="container">
<div id="main">
<div class="inside">
main contents<br>with some content
</div>
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
And the css floats everything with some corrections.
#container {
border: 1px solid red;
width: 100%;
}
#main {
background-color: #f0f;
margin-left: -240px;
width: 100%;
float: left;
}
#main .inside {
margin-left: 240px;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:240px;
}

Answer 3

In order to locate your divs as you are requiring you should:
Position divs left and right floating right
For the div you named left to be placed to the left of right , you must declare right before left and lastly main which does not require to be positioned relative
The container should declare a min width to prevent the break of the lay out.
So HTML should be a sort of...
<div id="container">
<aside id="right">
right contents
</aside>
<aside id="left">
left contents
</aside>
<div id="main">
main contents<br>with some content
</div>
</div>
And CSS should be
#container {
border: 1px solid red;
width: 100%;
min-width:600px;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: right;
width:220px;
}
From here onwards, adjust as your will
A fiddle here