DIV: Page Two-row background adaptive

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags block clear code content design designers different higher

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≫

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.