2 replies [Last post]
andrewheiss
Offline
newbie
Last seen: 13 years 30 weeks ago
Timezone: GMT-6
Joined: 2007-05-07
Posts: 2
Points: 0

So, I'm new at CSS and not kind of understand what's going on with it, but I'm trying to do something that I haven't found any help for online (after hours of Googling). I have a basic 2 column fluid layout (http://andrewheiss.110mb.com/index.html; http://andrewheiss.110mb.com/css.css) (I would post the code, but there are some pictures, so I'll just post the links, unless you want the code here too - plus the code is a mess... first time...).

I'm trying to hang the logo slightly outside the header div, so the transparent parts hang out over the background. I also want the top margin of the header to be at the same level of the line in the transparent png (see the image to see what I mean).

Anyway, I got it to work using floats and negative positioning, as you can see, but it's a nightmare to work with now. The divs are way too overlapped and every time I try adding something to the divs or adding footer div, I have to reposition everything. The only advantage is the fluidity. I tried absolute positioning, but that was a mess too.

What is the best practice for getting an image to hang outside of a div while keeping a fluid layout and easy-to-work-with divs?

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 25 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Try this approach:<!DOCTYPE

Try this approach:






/**/





Proofreading


  • Personal & Family
    History


  • Transcription


  • Other Projects




  • content here


    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Phasellus ac est sit amet nisl feugiat convallis.
    Donec eget metus id purus tempus feugiat. Ut ac tellus.
    Quisque non nibh. Vestibulum quis nisi. Suspendisse
    porttitor. Mauris quis purus. Suspendisse volutpat
    dignissim libero. Etiam erat urna, sollicitudin ut,
    scelerisque quis, blandit id, purus. Maecenas
    ullamcorper dignissim odio. Aliquam id sapien. Vivamus
    est tellus, viverra ut, posuere et, tempus eget, ipsum.
    Vivamus auctor risus sit amet erat. Nam lacinia nisl ut
    sem. Nunc tincidunt dignissim tortor.







    Be sure to test your work with and without images and styles enabled.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    andrewheiss
    Offline
    newbie
    Last seen: 13 years 30 weeks ago
    Timezone: GMT-6
    Joined: 2007-05-07
    Posts: 2
    Points: 0

    It worked!

    Thanks! That worked great! I see what you did with the margins of the wrap - didn't think of that before.

    Thanks again!