Absolute Positioning content area problem

HTML & CSS
1

Issue 1:
In this link there is a black strip area with an image under latest project. It is positioned using absolute positioning.
The problem is, if we increase the content under welcome to our website, the black strip area still stays in the same position like before and doesnt go on with the latest projects section.

Issue 2:
Inside the portfolio section at the right, there is a details link. As of now it gets sticked under the text area. Rather it must get bottom aligned to the left of the black box in which it stays. Tried vertical-align:bottom property. Did not work out.

Please suggest solutions for the above.

2

Issue 1: pos:abs is not feasible if the element needs to move out of the way of other elements. Why not just move that div under the content and remove pos: abs?

Issue 2: you could try something like:

.details a {
    color: #BF0021;
    [COLOR="Red"]display: block;
    margin-top: 30px;[/COLOR]
    text-decoration: none;
}
3

It is positioned using absolute positioning.
The problem is, if we increase the content under welcome to our website, the black strip area still stays in the same position like before and doesnt go on with the latest projects section.

Of course. You placed it absolutely. Like sticking a post-it note on your monitor. There’s no way your content can “push” it down, because you’ve made it so there is nothing to push.

You’ll have to abandon absolute positioning if you don’t want it absolutely positioned… and it sounds like you don’t want it absolutely positioned.

For details, however… THERE is a good place to try absolute positioning.


<div class="portfolio">
  [b]<h2>[/b]<img src="images/porfolio.jpg" width="104" height="17" [b]alt="Portfolio: web art and more"[/b]/>[b]</h2>[/b]
  <div>
    <[b]p class="red"[/b]><img src="images/red.jpg" width="64" height="57" [b]alt="example page"[/b]/> <span>MS  //</span> Design of Direct d </p>
    <[b]p class="details"[/b]><img src="images/arrow.jpg" width="9" height="9" [b]alt=""[/b]/><a href="#">details</a></p>
  </div>

  <div>
    <[b]p class="red"[/b]><img src="images/scorpion.jpg" width="66" height="57" [b]alt="example page"[/b]/> <span>MS   //</span> Design of Direct</p>
    <[b]p class="details"[/b] ><img src="images/arrow.jpg" width="9" height="9" [b]alt=""[/b]/><a href="#">details</a></[b]p[/b]>
  </div>

  <div>
    <[b]p class="red"[/b]><img src="images/business.jpg" width="65" height="58" [b]alt="example page"[/b]/> <span>First   //</span> Designing</p>
    <[b]p class="details"[/b]><img src="images/arrow.jpg" width="9" height="9" [b]alt=""[/b]/><a href="#">details</a></p>
  </div>
</div>

.portfolio div {
position: relative;
padding-bottom: room for the .details text;
background image (though you could make it a LOT smaller, just give the box a black background and have the image just be the stuff on the left);
overflow: hidden; cause there’s a float in there.
}
.portfolio div p {
set font, color etc;
}

.portfolio div .red img {
float: right;
margin-bottom: 10px;
}

.portfolio div .red span {
color: #BF0021;
}

.portfolio div .details {
position: absolute;
bottom: 0;
left: 0;
etc;
}

Though I gotta say, 10px is unreadable. You building this site for cats or something?

Anyway, if you don’t want to abso-po the .details, you could have it just
clear: both;
and it’ll be under the little image, but it’ll be a whole line underneath. With abso-po here it would just sit on the bottom left corner while the image sits bottom right corner.

4