Holy Grail Layout Original code

Set the left float to three div because the parent container sets the padding value, and the width of the middle main is equal to the width of the furong content.
Set the width of the left and right sides to 190px, the parent container padding a value of 200px, set 190px, to facilitate viewing the display effect:
The left side is set to margin-left:-100%, so that the left column is moved to the leftmost side of the element, the right side is set to margin-left:-190px;
Set position:relative;right:-200px;
is to let the right column fill the position of the padding-right value of the parent element, do not overwrite main above on the same line position; Set the left column posotion:relative;left:-200px; to make the left column fill
Padding-left value to the left of the parent element

<!     DOCTYPE html>{padding:0 200px;/*Set parent container left and right padding value to 200px*/Min-width:200px; }. Main{width:100%;Height:30px;Background-color:Skyblue;float: Left; }. Left{width:190px;/*set the left layout width to 190px*/Height:30px;Background-color:Blue;float: Left;Margin-left:-100%;position:relative; Left:-200px; }. Right{width:190px;/*set the left layout width to 190px*/Height:30px;Background-color:Pink;float: Left;Margin-left:-190px;position:relative; Right:-200px; }/*Holy Grail Layout*/</style>

Holy Grail Layout code

Holy Grail Layout Original code