WordPress.org

Support

Support » Themes and Templates » Placing div properly outside wrapper area. FF & IE!?

Placing div properly outside wrapper area. FF & IE!?

  • Hi, I’ve been spending the las 2 days trying to figure this out.
    I’m using the Benevolence theme btw.
    Basically, I’m trying to place a “box” outside the wrapper area, floating on the right side of wordpress.
    This is what I did, and work perfectly under Firefox.
    I added this to the header.php
    div id="wrapper">

    <div id="masthead">

    <div id="blogTitle">

    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>

    </div>
    <div><?php include (TEMPLATEPATH . '/rightbox.php'); ?></div>

    </div>

    <div id="insideWrapper">
    ———————————————
    The rightbox.php for now is as simple as this
    ———————————————
    <?php
    /*
    Template Name: right box
    */
    ?>
    <div ><!--id="box-right"-->
    <strong>Right box</strong>
    <p align="center">content goes here and the rest right below.
    <p align="left">some more stuff right here

    </div>

    and the css style…
    #box-right {
    background: #555;
    position: relative;
    float: right;
    margin: 0px -140px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 120px;
    }

    As you see I set a -140 margin, this way the box has a gap about 10px from the right edge of the blog, above the body background, and this is how I want it, in firefox it’s great, but things change in IE.
    The box is aligned with its left edge to the right side of the blog, I can’t move it a single pixel to the right past -120px.

    Seem lik in IE this box is confined by the wrapper element.
    Any help is greatly appreciated, even another solution to put this box on the right side.

    Thanks everyone

  • The topic ‘Placing div properly outside wrapper area. FF & IE!?’ is closed to new replies.