CSS positioning images and text

Answer 1

This is a bit wrong

    .top-pic {
    position: absolute;
    top: -5.7em;
    right: -1.5em;
    z-index: 1;
}

Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.

In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:

http://layouts.ironmyers.com/

http://www.csszengarden.com/

That is how CSS layouts are done.

Answer 2

If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.

<div class="top-pic">
  <img src="index2_files/girlbird.png">
</div>
<div class="logo">
  <img src="index2_files/logo-center.png">
</div>

CSS Changes

.top-pic {
    float: right;
    position: relative;
    top: -50px;
    right: -25px;
}

Answer 3

I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:

.top-pic {
    float: right;
    margin-top: -200px;
}

Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.