Home > Developer > CSS

Typical DIV + CSS three-row and two-column center height adaptive layout

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

How to center the entire page content, and how to automatically scale the highly adaptive content. This is the most common problem in CSS layout learning. The following is a practical example and detailed explanation. (The experience in this article is discussed by xpoint and guoshuang in the blue ideal Forum .)
First, let's take a look at the actual running effect. This page can be adaptive to the center and height in mozilla, opera, and IE browsers. Let's analyze the code:
CSS:

The code is as follows: Copy code
Body {
Background: #999;
Text-align: center;
Color: #333;
Font-family: arial, verdana, sans-serif;
}
# Header {
Width: 776px;
Margin-right: auto;
Margin-left: auto;
Padding: 0px;
Background: # EEE;
Height: 60px;
Text-align: left;
} # Contain {
Margin-right: auto;
Margin-left: auto;
Width: 776px;
} # Mainbg {
Width: 776px;
Padding: 0px;
Background: #60A179;
Float: left;
}
# Right {
Float: right;
Margin: 2px 0px 2px 0px;
Padding: 0px;
Width: 574px;
Background: # ccd2de;
Text-align: left;
}
# Left {
Float: left;
Margin: 2px 2px 0px 0px;
Padding: 0px;
Background: # F2F3F7;
Width: 200px;
Text-align: left;
}
# Footer {
Clear: both;
Width: 776px;
Margin-right: auto;
Margin-left: auto;
Padding: 0px;
Background: # EEE;
Height: 60px ;}
. Text {margin: 0px; padding: 20px ;}
HTML:
<Body>
<Div id = "header"> header </div>
<Div id = "contain">
<Div id = "mainbg">
<Div id = "right">
<Div
Class = "text"> right <p> 1 </p> <p> 1 </p> <p> 1 </p> <p> 1 </p> <p> 1 </p> </div>
</Div>
<Div id = "left">
<Div class = "text"> left </div>
</Div>
</Div>
</Div>
<Div id = "footer"> footer </div>
</Body>

First, we define the body and the first line at the top # header. The key here is text-align: center in the body; and margin-right: auto in the header; margin-left: auto ;, use these two statements to center the header. Note: In fact, the definition of text-align: center; is already centered in IE, but it is not valid in mozilla. You need to set margin: auto; to center in mozilla.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More