Home/ Questions/Q 8300175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T16:26:44+00:00

I would like the end result to look like this: https://dl.dropbox.com/u/65978956/Capture.JPG The #logo image

  • 0

I would like the end result to look like this:
https://dl.dropbox.com/u/65978956/Capture.JPG

  1. The #logo image is positioned inside the .page div with some text overflowing the div.
  2. The #logo image’s position has to be relative to the .page div´s position so that it would always be positioned the way it is on the picture.

The problem is, that since I can only get the #logo to overlap when I set its position as absolute the .page div no longer auto-resizes with the content vertically.

The overflow-x and overflow-y values don’t allow me to achieve what I am looking for

body {
    background-color: beige;
}

.page {
    margin: auto;
    position: relative;
    width: 984px;
    min-height: 800px;
}

#logo {
    background-image: url(../Content/Site_Images/logo.png);
    background-repeat: no-repeat;
    height: 444px;
    left: -98px;
    margin-top: 5px;
    opacity: 0.7;
    position: absolute;
    width: 381px;
    z-index: -1;
}

and my view file:

<body>
  <section class="Page">
    <figure id="logo"></figure>

    @*--Other omitted sections--*@
    .....
    .....
  </section>
</body>

What should I be doing to get the desired effect.

Thanks for helping

EDIT.

jsFiddle: http://jsfiddle.net/ngsEG/1/

See how the content does not resize and the image is displayed correctly. If I add overflow:hidden to the .page section, then the page resizes, but the image overflow is also hidden.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, with the fiddle you posted, it becomes apparent that your issue has nothing to do with the absolute position of the logo. Rather, your @*--Other omitted sections--*@ and its css was the issue, namely, the float on #MainContent was not being wrapped by the .Page element. Because of what you are trying to do with the logo, I agree, the typical fixes of overflow: hidden or auto do not work here. However, the old clearfix solution should. So:

    .Page:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

    See the fiddle.

    Note: if IE7 or less support is needed, see the additional info in the clearfix link above.

    • 0