DIV+CSS: Page Two-row background adaptive

A common situation in Web page layout is that the main part of the Web page is divided into one row and two columns; In many cases, designers often put the background color of the left and right two columns into different colors to achieve a clear distinction between the content block, but this design to the layout of a seemingly simple, and the implementation of a very difficult problem That is how the left and right two columns to achieve the background height adaptive, and the left content is higher than the right side of the background color should be the same as the left;

In order to achieve this, I have searched countless articles on the Internet, there are no good solutions; most people do it with a large number of negative numbers and some use JavaScript, and then because it doesn't make sense, I always use a form, because it's the easiest; but today my colleague asked me this question, I think about it at noon, come up with a solution, write and share with you;

Basic principles:

1, the layout should be reasonable, not to achieve this effect and make HTML code become bloated;
2, the CSS part also wants the simple ingenious realization, cannot write the massive code for this kind of effect, but the main or the browser compatibility aspect should have no problem;

Here is the code I implemented, to illustrate that this layout is not ideal yet, but this is the best solution I can think of for the time being;

Implementation method One: the left side with a border, the right with the background color;

This method is to the left with a 200PX border to achieve a column of background, and then use the actual background color of the label to achieve another column background, so that the left and right is always the same height;

Program code

<div id= "box" >
<div id= "right" >right <br/> right</div>
<div id= "left" >left</div>
<div style= "Clear:both" ></div>
</div>

Program code

<style>
* * This line may not look, is nonsense, in order to look at a little
*{padding:0; margin:0; font-size:12px; line-height:1.8; font-family:verdana;
/* The outermost box, the left frame 200PX, has the background color * *
#box {background: #FFCC00; width:700px; border-left:200px solid #FF9900;}
/* Leave a column to the left to move 200px*/
#left {margin-left:-200px; width:200px; position:static;}
/* Due to the difference between IE and Firefox, so the IE added a line for processing * *
* HTML #left {position:fixed;}
/* Right width, here why I did not write 700PX; to tell you the truth, I really did not want to understand that here can only write 900-200-2=698px, but this in the use of the process, will not have an impact;
#right {float:right; width:695px;}
</style>