CSS: Fixed left adaptive layout on the right of the webpage

Last Update:2017-01-13 Source: Internet

Author: User

Tags relative wrapper

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

1. Left-side fixed adaptive layout

Floating element on the right

The rendering of a webpage has a lot to do with the mechanism of the webpage. The first element to appear is displayed first, and the element on the right is set to right. The element on the left is not floating, but the element on the right is set to margin-right, the value is the width of the right element.
CSS

The code is as follows:

Copy code

# Nav {width: 200px; float: right; overflow: hidden ;}
# Content-wrapper {margin-right: 200px ;}
HTML

<Div id = "nav">
<P> Menu 1 </p>
<P> Menu 2 </p>
<P> menu 3 </p>
<P> menu 4 </p>
</Div>
<Div id = "content-wrapper"> websites on the internet occupy a large portion of the left and right layout. Before the emergence of responsive design, the width of webpages was mostly fixed to PX, however, as the user's display screen grows, we need to use the screen width as much as possible. A typical scenario is the fixed width of the navigation bar on the right, we hope that the width on the left will automatically adapt to the browser width. <Br>
<Br>
We can use js to easily achieve this, but we hope to only use css, which is more concise. There are two ways to achieve this effect. </Div>
</Div>

In this layout, the menu bar appears above the body and is loaded first. However, if it is other content, seo optimization is not very good.
Negative margin)
This method sets the margin (left-margin or right-margin) of a div with a width of 100% to a negative value, then, set the outer margin of the first sub-div (in the same direction as the parent container margin) to the corresponding positive value, then the div can be floating and adaptive to the browser width.
CSS code

The code is as follows:

Copy code

# Nav {width: 200px; float: right ;}
# Content-wrapper {margin-right:-200px; float: left; width: 100% ;}
HTML code

<Div id = "content-wrapper">
<Div id = "content">
<P> Beijing, January 12 (reporter Jia Jingfeng) The China Banking Regulatory Commission (CBRC) said on the 12th that it will support the construction of affordable housing on the premise of controllable risks and sustainable commerce, at the end of November 2010, the development loans for affordable housing increased by more than three times, and the loans for affordable housing purchased by individuals increased by more than four times per year. However, guaranteed housing loans still have problems such as insufficient risk mitigation and difficult implementation of repayment guarantee. </P>

</Div>
</Div>
<Div id = "nav">
<P> Menu 1 </p>
<P> Menu 2 </p>
<P> menu 3 </p>
<P> menu 4 </p>
</Div>

In this example, a css "hack" technology is also used, that is, the parent container height caused by psuedo css clearance will not automatically increase.

2. Fixed right adaptive on the left

First, the left column is fixed in width, and the right column is adaptive to the positioning method:

The code is as follows:

Copy code

<! Doctype html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8">
<Title> fixed width in the left column and absolute positioning method in adaptive mode in the right column </title>
<Style type = "text/css">
Body {
Margin: 0;
}
# Nav {
Top: 0;
Left: 0;
Width: 230px;
Height: 600px;
Background: # ccc;
Position: absolute;
}
# Main {
Height: 600px;
Margin-left: 230px;
Background: # 0099ff;
}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "nav">
Left Column
</Div>
<Div id = "main">
Right column
</Div>
</Div>
</Body>
</Html>

It looks nice, ..

Because the left column uses absolute positioning and is out of the document stream, there is a defect that the container cannot be opened when the height of the left column is greater than that of the right column, this defect does not affect the layout of the two columns, but if there is a bottom column under the two columns, the bottom column and the left column will overlap:

The code is as follows:

Copy code

<! Doctype html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8">
<Title> fixed width in the left column and absolute positioning method in adaptive mode in the right column </title>
<Style type = "text/css">
Body {
Margin: 0;
}
# Nav {
Top: 0;
Left: 0;
Width: 230px;
Height: 600px;
Background: # ccc;
Position: absolute;
}
# Main {
Height: 400px;
Margin-left: 230px;
Background: # 0099ff;
}
# Footer {
Text-align: center;
Background: #009000;
}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "nav">
Left Column
</Div>
<Div id = "main">
Right column
</Div>
</Div>
<Div id = "footer">
Bottom Bar
</Div>
</Body>
</Html>

Let's take a look at the second method: fixed width on the left bar and adaptive negative margin method on the right bar:

The code is as follows:

Copy code

<! Doctype html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8">
<Title> fixed width in the left column and adaptive negative margin method in the right column </title>
<Style type = "text/css">
Body {
Margin: 0;
}
# Container {
Margin-left: 230px;
_ Zoom: 1;
/* The left column of IE6 compatibility disappears */
}
# Nav {
Float: left;
Width: 230px;
Height: 600px;
Background: # ccc;
Margin-left:-230px;
Position: relative;
/* The left column of IE6 compatibility disappears. IE6 is really hard to worry about. >_< */
}
# Main {
Height: 600px;
Background: # 0099ff;
}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "nav">
Left Column
</Div>
<Div id = "main">
Right column
</Div>
</Div>
</Body>
</Html>

In this way, no matter how the height of the two columns changes, there will be no problem:

The code is as follows:

Copy code

<! Doctype html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8">
<Title> fixed width in the left column and adaptive negative margin method in the right column </title>
<Style type = "text/css">
Body {
Margin: 0;
}
# Container {
Margin-left: 230px;
_ Zoom: 1;
/* The left column of IE6 compatibility disappears */
}
# Nav {
Float: left;
Width: 230px;
Height: 600px;
Background: # ccc;
Margin-left:-230px;
Position: relative;
/* The left column of IE6 compatibility disappears. IE6 is really hard to worry about. >_< */
}
# Main {
Height: 400px;
Background: # 0099ff;
}
# Footer {
Clear: both;
Text-align: center;
Background: #009000;
}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "nav">
Left Column
</Div>
<Div id = "main">
Right column
</Div>
</Div>
<Div id = "footer">
Bottom Bar
</Div>
</Body>
</Html>

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.

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