CSS Adaptive Two layout implementation

This article introduces a CSS to achieve the realization of adaptive left and right layout of the friends who need to know how to refer to.

Instance

<style type= "Text/css" >
body,div,h3,p{margin:0;padding:0;
. Fl{float:left;display:inline;
. Fr{float:right;display:inline;
. Cl{clear:both;

. container{width:250px;margin:60px auto 0;}
. Col_rigid{width:62px;height:62px;float:left;background:url (' gh.png ');
. col_flexible{margin-left:72px;
</style>

The following is the main part

<div class= "Container" >
<div class= "Col_rigid" ></div>
<div class= "Col_flexible" > Right width Adaptive, modify the container width value try. </div>
</div>
<div class= "Container" >
<div class= "Col_rigid" ></div>
<div class= "Col_flexible" >
<div>
<h3 class= "FL" > I left floating </h3><a class= "fr" href= "#" > I right float </a>
<div class= "CL" ></div>
</div>
<p> I am content </p>
</div>
</div>

The HTML code is just two div:

<div class= "Col_rigid" ></div>
<div class= "Col_flexible" ></div>

CSS code is two class:

. col_rigid{width:62px;height:62px;
. col_flexible{margin-left:72px;

The effect is shown in the following illustration:

This implementation is very concise, but there are some negative issues that need to be alerted.

Suppose we want to achieve the following effects:

Usually we need to use the purge element below the floating element, as the code says:

<div class= "Col_rigid" ></div>
<div class= "Col_flexible" >
<div>
<h3 class= "FL" > I left floating </h3><a class= "fr" href= "#" > I right float </a>
<div class= "CL" ></div>
</div>
<p> I am content </p>
</div>

But the unexpected is that the code does not work the way we want it to, and its rendering effect is as follows:

As shown in Figure 1-3, the actual result is that the content behind the floating element in the right column is cleared below the bottom of the left column, resulting in a large blank space after the floating element in the right column. To illustrate, this is not a bug in IE or some kind of browser, but the HTML standard. See my translation of the article to clear the new method of floating.

That means we can't use clear float in the right column, so how do we get the effect of figure 1-2 that we want? You can do this by fixing the height on the floating row div element in the right column. The code is as follows:

<div class= "Col_rigid" ></div>
<div class= "Col_flexible" >
<div style= "height:30px;" >
<h3 class= "FL" > I left floating </h3><a class= "fr" href= "#" > I right float </a>
</div>
<p> I am content </p>
</div>

Summary: In the adaptive right and left we just modify the div display to display:inline, so we use Float:left and rigth to float around, so long as the width of the parent container width can be achieved by adaptive two-column layout.