Holy Grail of Layouts and its change - html

Question

Question 1:I learnt Holy Grail of Layouts today, after coding,the browsers show me strange format like this(not a complete black border):
[
my code is following:
#container {
border: 10px solid black;
/*this code cause the umcomplete black border*/
padding: 0 220px 0 200px;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Question 2:In my opion,if I make some changes, same layout will show but position:relative is not included.The format is still strange(content in midddle area is covered by both side areas):
.main2 {
background-color: grey;
float: left;
width: 100%;
min-height: 100px;
}
/*this is the only new code*/
#main2Inner {
margin: 0 220px 0 600px;
}
.left2 {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
min-height: 100px;
}
.right2 {
float: left;
width: 220px;
margin-left: -220px;
background-color: green;
min-height: 100px;
}
<div id="container2">
<div class="main2">
<div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
</div>
<div class="left2">this is paragraph 5</div>
<div class="right2">this is paragraph 6</div>
</div>

Answer 1

You are dealing with floating elements overflowing their container. You may use overflow:hidden (or position/float, display) to modify the block formating context (BFC).
#container {
border: 10px solid black;
overflow: hidden;
/*keyword : Block Formating Context */
padding: 0 220px 0 200px;
min-width: 500px;
;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Flex or table display would be more reliable in my own opinion
#container {
border: 10px solid black;
display: flex;
min-height: 50px;
box-sizing: border-box;
}
.main1 {
background-color: grey;
flex: 1;
}
.left1 {
order: -1;
width: 200px;
background-color: red;
}
.right1 {
width: 220px;
background-color: green;
}
#container2 {
border: 10px solid black;
height: 50px;
/* will grow taller if needed */
display: table;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
}
#container2 > div {
display: table-cell;
}
<h1>display:flex</h1>
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
<hr/>
<h1>display:table</h1>
<div id="container2">
<div class="left1">this is paragraph 1</div>
<div class="main1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>