Question

I know how to make a fixed+fluid column layout (and there are many examples online). But, unfortunately, all the examples I know about have first fixed column and then the fluid column in the HTML code, something like this:

<div class="my-layout">
    <div class="my-fixed-col">This is fixed column</div>
    <div class="my-fluid-col">This is fluid column</div>
</div>

Could somebody provide me a way how to create this layout with fluid column first in the HTML and the fixed afterwards, something like this:

<div class="my-layout">
    <div class="my-fluid-col">This is fluid column</div>
    <div class="my-fixed-col">This is fixed column</div>
</div>

By the way, the fixed column is on the left.

Reasons for doing it:

• My <h1> tag is in the fluid column, so I would like to have it closer
  to the top of the page
• For the responsive-design purposes I would
  like to have the fluid column on the top on the smaller screens.

Answer 1

Try this one- Fluid and fixed plus header and footer included.

HTML:

<div class="wrapper">
    <div class="header">
             header
    </div> 
    <div class="wrapleft">    
        <div class="left">
            left
        </div>
    </div>    
        <div class="right">
            right
        </div> 
        <div class="footer">
            footer
        </div>     
</div>

CSS:

body {
   padding: 0px;
   margin: 0px;
}
.wrapper{
   width: 100%;
   margin: 0 auto;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
.left{
   margin-right: 243px;
   background-color: #afeeee;
   height: 200px;
}
.right{
   float: right;
   width: 233px;
   margin-left: -233px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}