A common situation in Web page layout is that the main part of the Web page is divided into two rows. 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;
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 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/>
<div id= "left" >left</div>
<div style= "Clear:both" ></div>
</div>
Program code
<style>
/* This line may not look, it's nonsense, to look good. */
*{padding:0; margin:0; font-size:12px; line-height:1.8; font-family : Verdana;
//* Outermost box, left border 200PX, 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, IE added a row for processing */
* HTML #left {position:fixed}
/* The width to the right, why I did not write 700PX here; to tell you the truth, I really did not want to understand; This can only be written 900-200-2=698px; */
#right {float:right width : 695px;}
</style>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv=" Content-type " content= "HTML; Charset=utf-8 "/>
<title>http://www.jzread.com</title>
<style>
*{padding:0; margin : 0; font-size:12px; line-height:1.8; Font-family:verdana;
#box {background: #FFCC00; width:700px; border-left:200px solid #FF9900;}
#left {margin-left:-200px; width:200px; position:static;}
* HTML #left {position:fixed;}
#right {float:right; width:695px;}
</style>
</head>
<body>
<div id= "box" >
<div id= "right" >right <br /> right</div>
<div id= "left" >left</div>
<div style= "Clear:both" ></div>
</div>
</body>
</html>
Method One question is: What if the background on the left is a picture? Yes, if it is pure color, then there is no problem; if it's a picture, there's no way.; so I wrote the second solution;
Implementation method Two: Using nested implementations of both columns; This method I personally recommend;
Program code
<div id= "box" >
<div id= "Content" >
<div id= "Right" >right <br/>right</div>
<div id= "left" >left</div>
</div>
</div>
CSS Part I don't have to explain it!
Program code
<style>
*{padding:0; margin:0; font-size:12px; line-height:1.8; font-family:verdana;
#box {background: #FFFF66; width:700px; padding-left:200px; float:left;}
#content {background: #FF6600; float:left;}
#right {width:695px; float:right;}
#left {width:200px; margin-left:-200px; position:static; float:left;}
* HTML #left {position:fixed;}
</style>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml "
<head>
<meta http-equiv=" Content-type " content= "HTML; Charset=utf-8 "/>
<title>http://www.jzread.com</title> <style>
*{padding:0; margin:0; font-size:12px; line-height:1.8; Font-family:verdana;
#box {background: #FFFF66; width:700px; padding-left:200px; float:left;}
#content {background: #FF6600; float:left;}
#right {width:695px; float:right;}
#left {width:200px; margin-left:-200px; position:static; float:left;}
* HTML #left {position:fixed;}
</style>
</head>
<body>
<div id= "box" >
<div id= "content"
< Div id= "Right" >right <br/>right</div>
<div id= ' left ' >left</div> </div></div
Reprint Please specify the Source: Construction Station teaching network
</body>
</HTML≫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
