Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Floating Layout Test </title>
<link rel= "stylesheet" type= "Text/css" href= "Layout2.css" >
<script src= "Layout2.js" ></script>
<body>
<div>
<div id= "Top" > This is the head </div>
<div id= "Middle" >
<div id= "Left" > this is Body </div>
<div id= "Right" > This is the body </div>
<div class= "Clear" ></div>
</div>
<div id= "Bottom" > This is the bottom </div>
</div>
</body>
*{
margin:0px;
padding:0px;
}
html{
Background-color:pink;
Background-image:url (' layout2.jpg ');
}
body{
border:20px Solid Brown;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-bottom:10px;
Background-color:gold;
}
#top {
height:50px;
Background-color:gray;
}
#middle {
height:300px;
Background-color:black;
}
#left {
Float:left;
width:30%;
height:100%;
background-color:red;
}
#right {
Float:right;
width:69%;
height:100%;
Background-color:green;
}
#bottom {
height:50px;
Background-color:yellow;
border:10px solid blue;
}
. clear{
Clear:both;
}
CSS12---Actual combat---layout---Upper and lower layout, Middle 2 columns
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
