Holy Grail Layout
Three rows of equal height
Html:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<title></title>
<link rel= "stylesheet" href= "Docm.css" >
<body>
<div id= "Page" >
<div id= "HD" ></div>
<div id= "BD" >
<div class= "Main" >1231111<p> me i i </p><p> i i i </p><p> i i i </p><p> i i I </p></div>
<div class= "Sub" >11222</div>
<div class= "Extra" >456</div>
</div>
<div id= "FT" ></div>
</div>
</body>
CSS: (set padding in. BD and set negative margins in. Sub and. Extra to display the contents of the middle)
*{
margin:0;
padding:0;
}
#hd {
width:100%;
height:100px;
Background-color: #FC3D83;
}
. Main {
Float:left;
width:100%; Intermediate Content Adaptive
Background-color: #ccc;
padding-bottom:9999px;//Put the content out and back it up to form a high
Margin-bottom: -9999px;//Put the content out and back it up to form a high
}
. Sub {
Float:left;
width:190px;
Margin-left:-100%; Set content to the left
Background-color: #ED1E25;
padding-bottom:9999px;
Margin-bottom: -9999px;
position:relative;//Set relative position to fit, while Double wing is not set
Left: -190px; //Set the padding in . BD, and then set the negative margins in the. Sub and. Extra to display the contents of the middle .
}
. Extra {
Float:left;
width:190px;
Margin-left: -190px; Set content to the right
Background-color: #f0f;
padding-bottom:9999px;
Margin-bottom: -9999px;
position:relative; Set the relative position to fit, while the double wings are not set
Right: -190px; //Set the padding in . BD, and then set the negative margins in the. Sub and. Extra to display the contents of the middle .
}
#bd {
padding:0 190px 0 190px; //Set the padding in . BD, and then set the negative margins in the. Sub and. Extra to display the contents of the middle .
Background-color: #ff0;
Overflow:hidden; Settings beyond content hiding, etc.
}
#ft {
width:100%;
height:100px;
Background-color: #5880F4;
}
Effect
What to look at---------------------------------------------dividing line-------------------------------------------------------------
Dual Wing layout
Three rows of equal height
Html:
<div id= "Page" >
<div id= "HD" ></div>
<div id= "BD" >
<div class= "main" ><div class= "Inside" >1231111</div></div>
<div class= "Sub" >234<p> me i i <p/><p> i i i <p/><p> i i i <p/><p> i i i i <p/ ></div>
<div class= "Extra" >456</div>
</div>
<div id= "FT" ></div>
</div>
Css:
*{
margin:0;
padding:0;
}
#hd {
width:100%;
height:100px;
Background-color: #FC3D83;
}
. Main {
Float:left;
width:100%; Self-adapting
Background-color: #ccc;
padding-bottom:9999px;//Put the content out and back it up to form a high
Margin-bottom: -9999px; Put the content out and then retract to form a high
}
. Sub {
Float:left;
width:190px;
Margin-left:-100%;
Background-color: #ED1E25;
padding-bottom:9999px;
Margin-bottom: -9999px;
}
. Extra {
Float:left;
width:190px;
Margin-left: -190px;
Background-color: #f0f;
padding-bottom:9999px;
Margin-bottom: -9999px;
}
#bd {
Background-color: #ff0;
Overflow:hidden; Out of content hiding
}
. inside{
Margin:0 190px; In the middle of the box set the margin to display the content
}
#ft {
width:100%;
height:200px;
Background-color: #5880F4;
}
Effect
CSS Grail layout and dual wing layouts