CSS Right Fixed width left adaptive or three-column layout left fixed middle adaptive problem

One: Right fixed width left Adaptive

  first method: Left margin-right float : right 

      html code can be written as follows :
    <div>
        <a href=" "target=" _blank ", I'm lone </A>
     </div>

　<div>
<a href= "" target= "_blank" > I am lone </a>
</div>

　CSS The code can be written as follows:

. Box-left{height:300px;margin-right:300px;background: #DDD;}
. Box-right{width:300px;height:300px;float:right;background: #AAA;}

The above code can achieve the effect.

&NBSP;&NBSP;&NBSP;&NBSP; 2 margin-right  Right side with absolute positioning

    HTML

    <div>
        <div>
             <a href= "" target= "_blank", I am lone </A>
        </div>
        &NBSP;<DIV>
            <a href= "" target= "_blank" I'm lone </A>
        </div>
    </div

CSS The code is as follows:

. bd{position:relative;}
. bd-left{height:300px;; Margin-right:300px;background: #DDD;}
. Bd-right{width:300px;height:300px;position:absolute;top:0;right:0;background: #AAA;}

Third method: Floating on the right with a negative margin value

HTML The code is as follows:

<div>
<div>
<div>
<a href= "" target= "_blank" >I'm lone .</a>
</div>
</div>
<div>
<a href= "" target= "_blank" >I'm lone .</a>
</div>
</div>

CSS The code is as follows:

. Wrap{overflow:hidden;background: #EEE;}
. Wrap-right{width:300px;position:relative;float:right;margin-left:-300px;background: #AAA;}
. Wrap-left{width:100%;float:left;}
. Left-con{margin-right:300px;background: #DDD;}
. left-con,.wrap-right{height:300px;}

the above is my summary of the three kinds ofHTML CSStwo column Layout method(left self-adapting Fixed Right), if there is a shortage of places please give us a lot of advice. Let's take a look at the three-column layout(fixed left and right Intermediate Self-adapting situation).

Two: The situation of fixed middle self-adaptation

&NBSP; I am now summarizing the 2 as follows:

&NBSP; Margin-right method.

The code is as follows:

   <div style= "width:100%; margin:0 auto;" >
<div style= "width:200px float:right background-color: #960" >This is the right side of the content Fixed Width</div>
<div style= "width:150px float:left background: #6FF" >This is the left side of the content Fixed Width</div>
<div style= "margin-left:150px;margin-right:200px background-color: #9F3" >Intermediate content, adaptive width</div>
</div>

Second: The left and right sides use absolute positioning in the middle also using margin-left margin-right method:

HTML The code is as follows:

<div></div>
<div></div>
<div></div>

CSS The code is as follows:

. L-sidebar {
　　width:200px;
　　height:500px;
　　Position:absolute;
　　top:0;
　　left:0;
　　Background:blue;
}
. mainbar {
　　margin-left:200px;
　　height:500px;
　　margin-right:300px;
　　Background:green;
}
. r-sidebar {
　　width:300px;
　　height:500px;
　　Position:absolute;
　　top:0;
　　right:0;
　　Background:blue;
}

These are some of our daily work in the summary! If there are insufficient places please leave a message!! Discuss learning with each other!

CSS Right Fixed width left adaptive or three-column layout left fixed middle adaptive problem