I have have 3 parent divs with their classes. They separate the three parts of a page : Header, body and footer sections. The header is ok. In the body I have a div that should draw a line sth like ruler.
I put the loop code into this line to draw it but it fails so I set a absolute position so as the content increase height of the ruler/line increase too. Then in the footer for some reason I should set position:relative; but when I do, the footer div appear over the body div.
How can I fix it?
Note that the height of body and ruler/line is auto and when I set a background color for the body it doesn't make any difference.
code sample:
html
<body>
<div class="header">it's own code and classes</div>
<div class="body">
<div class="line">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<div class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><h3><?php the_title(); ?></h3></a></div>
<div class="cont"><?php get_the_excerpt();?></div>
<?php the_post_thumbnail('45*45'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="footer"><div class="ftr"></div></div>
</body>
and in the css part I have these:
.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
}
.line {
width:4px;
height:auto;
background:#000;
position:absolute;
right:640px;
padding-top:100px;
padding-bottom:30px;
}
.post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
}
.post:after {
content: "";
position: absolute;
top: 6%;
margin: -10px 0 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
border-left: 10px solid #999;
}
.title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
}
.cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
}
.footer {
width:999px;
height:200px;
margin:auto;
}
.ftr {
width:999px;
height:200px;
background:#000;
position:relative;
clear:both;
}
.ftr:after{
content:"";
position:absolute;
top:-9px;
right:500px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #06c;
}
EDITED: this is what I wanted
.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
}
.line {
width:4px;
**height:100%;** //this fixed the problem
background:#000;
padding-top:100px;
padding-bottom:30px;
}
.post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
}
.post:after {
content: "";
position: absolute;
top: 6%;
margin: -10px 0 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
border-left: 10px solid #999;
}
.title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
}
.cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
}
.footer {
width:999px;
height:200px;
margin:auto;
}
.ftr {
width:999px;
height:200px;
background:#000;
position:relative;
clear:both;
}
.ftr:after{
content:"";
position:absolute;
top:-9px;
right:500px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #06c;
}
EDIT 2: Still I have problem with drawing the line. Because the content is dynamic if I set height:100% or sth in pixel scale or even min-height when the contents increase or decrease It doesn't make changes in height of line
When you put something in position:absolute;, they are taken out of their container context and do not expand them. So when you put your footer in position:relative;, it falls where div class="body" ends, but since it contains nothing but line (which is absolute), body is empty and thus, footer appears "under" footer.
If I understand what you want, you should probably close line, so that "posts" are not in position:absolute; too.
<div class="body">
<div class="line"></div><!--here-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">