I have designed a web page but till now I have a bad problem that I can't find the answer. The HTML markup is like the one below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="strip">
<div class="menu-item-holder">
<div class="menu-item">
item1
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item2
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item3
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item4
</div>
</div>
</div>
<div class="body">
<div class="context">
<div class="header">
</div>
<div class="sticky-menu">
<div class="menu-item-holder">
<div class="menu-item">
item1
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item2
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item3
</div>
<div class="menu-item">
|
</div>
<div class="menu-item">
item4
</div>
</div>
</div>
<div class="upper-divs">
<div class="up-left-div">
</div>
<div class="up-right-div">
</div>
</div>
<div class="left-block">
</div>
<div class="middle-block">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
</div>
<div class="right-block">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
And the style is like this:
@charset "utf-8";
/* CSS Document */
.body{
width:1000px;
height:100%;
min-height:1600px;
background:#cccccc;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
padding-top:40px;
}
.strip{
width:100%;
min-height:50px;
background:#212121;
direction:rtl !important;
text-align:center !important;
margin:0 auto;
position:absolute;
left:0px;
top:0px;
}
.menu-item-holder{
margin:0 auto !important;
text-align:center;
padding:11px;
}
.menu-item{
display:inline;
direction:rtl;
color:#fff;
}
.context{
background:#a0a0a0;
width:86%;
height:100%;
min-height:1350px;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
}
.footer{
width:99.8%;
min-height:200px;
background:#212121;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
}
.header{
width:99.8%;
min-height:350px;
background:#ec2327;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
}
.sticky-menu{
width:99.8%;
min-height:50px;
background:#212121;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
text-align:center;
padding-top:11px;
}
.upper-divs{
margin-top:5px;
width:99.8%;
min-height:206px;
}
.up-left-div{
width:49%;
min-height:200px;
background:white;
float:left;
}
.up-right-div{
width:49%;
min-height:200px;
background:white;
float:right;
}
.left-block{
width:18%;
min-height:200px;
background:white;
float:left;
}
.middle-block{
width:61.8%;
min-height:200px;
background:black;
float:left;
margin-left:1%;
margin-right:1%;
}
.right-block{
width:18%;
min-height:200px;
background:white;
float:left;
}
.post{
width:98%;
min-height:200px;
background:red;
float:left;
margin:5px;;
}
And now the result is this:
I want to know, why the height of div of body class and the div of context class doesn't match to its children, why they are overflowing? But the div of class middle-block has the height of its children.
Try with a little change- overflow: auto;
.context{
background:#a0a0a0;
width:86%;
height:100%;
min-height:1350px;
direction:rtl !important;
text-align:right !important;
margin:0 auto;
overflow: auto;
}