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

Source: Internet
Author: User
Tags relative wrapper

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>

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.