HTML: фиксированный столбец + столбец жидкости наоборот

Question

Я знаю, как сделать фиксированную + колонку жидкости (и есть много примеров в Интернете). Но, к сожалению, все примеры, о которых я знаю, имеют сначала фиксированный столбец , а затем столбец жидкости в HTML-коде, что-то вроде этого:

<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>

Может ли кто-нибудь предоставить мне способ создания этого макета с жидкостным столбцом сначала в HTML и исправленным впоследствии, что-то вроде этого:

<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>

Кстати, фиксированный столбец слева.

Причины для этого:

• Мой тег <h1> находится в столбе жидкости, поэтому я бы хотел, чтобы он был ближе в начало страницы
• В целях адаптивного дизайна я бы хотелось бы, чтобы столбик жидкости был сверху на меньших экранах.

Answer 1

Попробуйте это - Жидкость и фиксированный плюс верхний и нижний колонтитулы включены.

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;
}