两列布局排列格

Question

2 column div layout: right column with fixed width, left fluid

我有同样的问题，只是在右边的代码框变为第一，第二左

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: left; 
} 

/*left block */ 
    .block_side { 
     width: 236px; 
     height: 400px; 
     float: left; 
     margin: 19px 0 0 30px; 
    } 


/* Right block */  
.content_side { 
     float: none; 
     overflow: hidden; 
     width: auto; 
     margin: 0 30px 0 0; 
    } 

content_side是左右block_side，但它们必须按该顺序具有文档

<div id="container"> 
    <div class="content_side"> 
    {CONTENT} 
    </div> 
    <div class="block_side"> 
    {BLOCK} 
    </div> 
</div> 

“content_side”替换应留一个单元，占据了整个可用宽度

Demo in Jsfiddle

Answer 1

更改CSS规则浮动：无浮动：权会做的伎俩，如果我正确地理解你的问题。

.content_side { 
    float: right; 
} 

Answer 2

变化#containet到的#container和文本对齐：左;至text-align：center;

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: center; 
} 

Demo in jsfiddle

Answer 3

CSS

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: left; 
    position:relative; 
    height:auto; 
} 

/*left block */ 
    .block_side { 
     width: 256px; 
     height: 400px; 
     float: left; 
     margin: 0px 0 0 30px; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    background-color:green; 
    } 


/* Right block */  
.content_side { 
     float: right; 
     width: 738px; 
     margin: 0; 
    height:400px; 
    overflow:auto; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    background-color:red; 
    } 

HTML

<div id="container"> 
    <div class="block_side"> 
    {BLOCK} 
    </div> 
    <div class="content_side"> 
    {CONTENT} 
    </div> 
</div> 

您需要浮动：左或浮动：正确的块（侧nd内容）。

DEMO HERE

更多箱尺寸伎俩在这里：http://css-tricks.com/box-sizing/