WordPress.org

Ready to get started?Download WordPress

Forums

Placing div properly outside wrapper area. FF & IE!? (1 post)

  1. themystical
    Member
    Posted 8 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic