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# 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>
Read more: CSS + Div layout Summary-BasicsDiv LayoutI made a good summary and read the values for all beginners.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
