CSS layout of the commonly used method
float: none | left | right
Value:
none: default. Objects do not float
left: text flow to the right side of the object
right: text flow to the left of the object
How it works, look at an example of a line of two
xhtml Code:
Example Source Code [www.hutshow.com]
<div id=”wrap”>
<div id=”column1″> here in the first column </ div>
<div id=”column2″> here is the second column </ div>
<div class=”clear”> </ div> / * This is contrary to the intent of web standards, but to illustrate the elements below it necessary to clear the floating * /
</ Div>
CSS code:
Example Source Code [www.hutshow.com]
# Wrap {width: 100; height: auto;}
# Column1 {float: left; width: 40;}
# Column2 {float: right; width: 60;}
. Clear {clear: both;}
position: static | absolute | fixed | relative
Value:
static: default. No special position, object orientation follows the rules of HTML
absolute: will flow out of the object from the document, use the left, right, top, bottom and other attributes relative to its closest one of the most set the parent object positioning absolute positioning. If there is no such parent is based on body object. And its cascading through the z-index property definition
fixed: not support. Object location to comply with the absolute (absolute) mode. However, to comply with some norms
relative: object is not stacked, but will be based on left, right, top, bottom and other properties in the normal flow of the document offset
It is to achieve a line two examples
xhtml Code:
Example Source Code [www.hutshow.com]
<div id=”wrap”>
<div id=”column1″> here in the first column </ div>
<div id=”column2″> here is the second column </ div>
</ Div>
CSS code:
Example Source Code [www.hutshow.com]
# Wrap {position: relative; / * relative positioning * / width: 770px;}
# Column1 {position: absolute; top: 0; left: 0; width: 300px;}
# Column2 {position: absolute; top: 0; right: 0; width: 470px;}
Where the difference between them?
Obviously, float is relative positioning, the browser will be with the changes in the size and resolution change, and position on the die, so under normal circumstances, or float layout!
CSS layout example used
Single one
Example Source Code [www.hutshow.com]
body {margin: 0px; padding: 0px; text-align: center;}
# Content {margin-left: auto; margin-right: auto; width: 400px;}
Two lines of a
Example Source Code [www.hutshow.com]
body {margin: 0px; padding: 0px; text-align: center;}
# Content-top {margin-left: auto; margin-right: auto; width: 400px;}
# Content-end {margin-left: auto; margin-right: auto; width: 400px;}
Three lines of a
Example Source Code [www.hutshow.com]
body {margin: 0px; padding: 0px; text-align: center;}
# Content-top {margin-left: auto; margin-right: auto; width: 400px; width: 370px;}
# Content-mid {margin-left: auto; margin-right: auto; width: 400px;}
# Content-end {margin-left: auto; margin-right: auto; width: 400px;}
Single two
Example Source Code [www.hutshow.com]
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto; overflow: auto;}
# Bodycenter # dv1 {float: left; width: 280px;}
# Bodycenter # dv2 {float: right; width: 420px;}
Two lines of two columns
Example Source Code [www.hutshow.com]
# Header {width: 700px; margin-right: auto; margin-left: auto; overflow: auto;}
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto; overflow: auto;}
# Bodycenter # dv1 {float: left; width: 280px;}
# Bodycenter # dv2 {float: right; width: 420px;}
Three rows of two columns
Example Source Code [www.hutshow.com]
# Header {width: 700px; margin-right: auto; margin-left: auto;}
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto;}
# Bodycenter # dv1 {float: left; width: 280px;}
# Bodycenter # dv2 {float: right; width: 420px;}
# Footer {width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear: both;}
Single three absolute positioning
Example Source Code [www.hutshow.com]
# Left {position: absolute; top: 0px; left: 0px; width: 120px;}
# Middle {margin: 0px190px0px190px;}
# Right {position: absolute; top: 0px; right: 0px; width: 120px;}
positioning a float
xhtml Code:
Example Source Code [www.hutshow.com]
<div id=”wrap”>
<div id=”column”>
<div id=”column1″> here in the first column </ div>
<div id=”column2″> here is the second column </ div>
<div class=”clear”> </ div> / * do not recommend the use of web standards, but remember the following elements need to clear float * /
</ Div>
<divid=”column3″> This is the third column </ div>
<divclass=”clear”> </ div> / * do not recommend the use of web standards, but remember the following elements need to clear float * /
</ Div>
CSS code:
Example Source Code [www.hutshow.com]
# Wrap {width: 100; height: auto;}
# Column {float: left; width: 60;}
# Column1 {float: left; width: 30;}
# Column2 {float: right; width: 30;}
# Column3 {float: right; width: 40;}
. Clear {clear: both;}
positioning the second float
xhtml Code:
Example Source Code [www.hutshow.com]
<div id=”center”class=”column”>
<h1> Thisisthemaincontent. </ h1>
</ Div>
<div id=”left”class=”column”>
<h2> Thisistheleftsidebar. </ h2>
</ Div>
<div id=”right”class=”column”>
<h2> Thisistherightsidebar. </ h2>
</ Div>
CSS code:
Example Source Code [www.hutshow.com]
===============================================================body {
margin: 0;
padding-left: 200px; / * LCfullwidth * /
padding-right: 190px; / * RCfullwidth CCpadding * /
min-width: 200px; / * LCfullwidth CCpadding * /
}
. Column {
position: relative;
float: left;
}
# Center {
width: 100;
}
# Left {
width: 200px; / * LCwidth * /
right: 200px; / * LCfullwidth * /
margin-left: -100;
}
# Right {
width: 190px; / * RCwidth * /
margin-right: -100;
}
Related posts:
- the tenth day : adaptive height If we want the end of the 3 column layout...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
- the minimum height (min-height) of the Magical BOX minimum height can be set to a minimum height,...
- The ninth day : The first example CSS layout Then start to really design the layout. And traditional methods, you...
- To achieve More div arranged Center To achieve More div arranged Center <?xml version=”1.0″ encoding=”iso-8859-1″?> <!DOCTYPE...
Related posts brought to you by Yet Another Related Posts Plugin.
