html - Css flow element take remaining width -

I am trying to change a div again in the rest of the site.

I have an HTML like this

  & lt; Nav> NNN & lt; / Nav> & Lt; Main & gt; Xxx & lt; / Main & gt; & Lt; On one hand & gt; Aaa & lt; / Aside & gt;  

On regular notebooks, I see them as three columns:

  nnn xxx aaa xxx  

but For the phone, I display them in second order, and like:

nnn xxx aaa xxx

So what am I doing in my CSS

It works until I give fixed width for both, Like every 50% but I have to go to nav / on one side C 170px and want to be main .

During the research I received other answers which say that I should remove the float feature, but then I can not reveal the part one side under the NAV and the right of the main part.

I tried some different display styles like display: table-cell (but nothing like rowspan for main ) or display: Inline block but I Of course it can not work

Hope someone has an idea how I can get this layout without touching the HTML.

"post-text" itemprop = "text">

Three column layouts for the desktop easily display table / table cell mobile layout, for which you can arrange the columns in the flipped C size Need to do, can be obtained as follows:

• Keep three blocks inside the cover
• Right to right of the cover
• First and fore Skip the third blocks, drag them out of the cover using negative margins
• Second Float on the right and make it 100% wide
• Add a clearfix to the cover (but you can not use the overflow hide)

  Navigation (background: # ccf;} main {background: # ccc;} on one side {background: # cfc;} @ media screen and (max-width: 963 px) {#wrapper {margin-left: 170px;} #wrapper : After {conte Nt: ""; Display area; Clean both; } NAV, one side (float: left; clear: left; margin-left: -170px; width: 170px;} main {float: right; width: 100%;}}  

  
 gt; nav & gt; nnn & lt; / ne & gt; & lt; main >   gt; & lt; one side & gt; aaa & lt; / one side & gt; & lt; / div & gt;