Question

I’m stuck with a problem that drives me crazy. I’m working on a website that has a box in the same div with the main navigation. It shows all the way to the right (the bar has width 100%) and I need it to show in the div with the main navigation (width 1020px)

I’m changing the structure of my divs, but it will only show correctly in Chrome (win). I have also tested Safari (win), Chrome (mac), and Safari (win).

Here’s what I have:

HTML

<div id="navigation" class="gb_ff clearfix">
    <div id="main_navigation" class="container hor_navigation clearfix">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'header', 'depth' =>'2', 'container' => 'none' ) ); ?>        
        <?php if ( !is_user_logged_in() ): ?>

        <div id="nav_subscription" class="subscription_form clearfix"> <span id="subscribe_dd" class="contrast">
            <?php gb_e( 'Get the Latest Deals' ) ?>
            </span>
        </div><!-- #main_navigation -->

        <div id="subscription_form_wrap" style="display:none;">
            <div class="optinbar_close" style="bottom: 202px; left: -10px;"></div>
            <p class="fillout2">Γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου'. </p>
            <!-- Begin MailChimp Signup Form -->
            <!--End mc_embed_signup-->
        </div>
    </div><!-- #header_subscription.subscription_form -->
    <?php endif ?>
</div><!-- #navigation -->

CSS

#navigation, #main_navigation li a {
    width: 100%;
    color: #999999;
}

#navigation {
    margin: 0 auto;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    z-index: 50;
    font-size: .9em;
    background: url(http://deals.karditsa.topgreekgyms.gr/wp-content/themes/gbs-merchant-dashboard/img/menu_gradient.png) repeat-x center bottom;
}

#main_navigation {
    height: auto;
    width: 1020px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

#subscription_form_wrap {
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: none;
    background-color: #FFFFFF;
    padding: 0;
    float: left;
    position: absolute;
    top: 46px;
    right: 0;
    height: auto;
    min-width: 200px;
    border: 1px solid #CCC;
    font-size: 13px;
}

#subscribe_dd {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 31px;
    background-color: #999999;
    width: 255px;
    height: 31px;
    white-space: nowrap;
    padding: 10px 20px 5px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px;
    position: absolute;
    top: 0;
    right: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(255, 255, 255, .2);    
}

I’m working on WordPress.

Answer 1

You might start by actually putting the “Get The latest Details” box inside of div with id of main_mavigation. Right now it is in the div with id “navigation” and is absolutely positioned with right=0, so it will obviously go all the way to the right.