Home/ Questions/Q 8890413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:29:47+00:00

I have have 3 parent divs with their classes. They separate the three parts

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
    • 0