See the figure first. Here we mainly use the float attribute. The value of this attribute indicates whether or not the object is floating.
Syntax:Float:None|Left|Right
Parameters:None:Objects do not float;Left:Objects float on the left;Right:Object floating on the right
Please refer to the code. Please advise CSS experts. You can also use position to implement two columns.Float.
Code
<! 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>
<Title> classic layout </title>
<Style type = "text/css">
/* General Blank spacing */
. Blank9 {height: 9px; width: 100% ;}
# Wrap {width: 960px; margin: 0 auto ;}
# Header
{
Height: 80px;
Margin: 0 auto;
Clear: both;
Border: # CCCCCC 1px solid;
}
/* Left */
# Sideleft
{
Height: 120px;
Float: left;
Width: 200px;
Overflow: hidden;
Border: # CCCCCC 1px solid;
}
/* Right */
# Sideright
{
Height: 120px;
Float: right;
Width: 750px;
Overflow: hidden;
Background-color: # fcf8f7;
Border: # CCCCCC 1px solid;
}
/* End of the page */
# Footer {height: 50px; border: # CCCCCC 1px solid; margin: 0 auto ;}
</Style>
</Head>
<Body>
<Div id = "wrap">
<Div id = "header">
<A name = "top"> </a>
<Span> page header </span>
</Div>
<Div class = "blank9"> </div>
<Div id = "sideleft">
<Span> left </span>
</Div>
<Div id = "sideright">
<Span> right </span>
</Div>
<Div class = "blank9"> </div>
<Div id = "footer">
<Div id = "foot">
<Span> footer </span>
</Div>
</Div>
</Div>
</Body>
</Html>