5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

How can I allow div to float outside the main container

by katindo
4 replies
  • WEB DESIGN
    • |
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.

I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.

Here's the HTML/PHP:
PHP Code:
<div class="purchase_options_meta clearfix">
                    <div class="purchase_options">
                        <?php if (function_exists('gb_deal_has_attributes') && gb_deal_has_attributes()): ?>
                        <div id="deal_attributes_wrap" class="section ">
                            <?php gb_add_to_cart_form() ?>
                        </div>
                        <?php else: ?>
                        <div class="buy_button gb_ff font_x_large">
                            <?php if ( gb_deal_availability() || !gb_is_deal_complete() ): ?>
                            <a href="<?php gb_add_to_cart_url(); ?>" class="button"><?php gb_e('Buy it!'); ?> <span><?php echo str_replace('.00','',gb_get_formatted_money(gb_get_price()))  ?></span></a>

                            <?php elseif ( gb_is_sold_out() ) : ?>
                            <a class="button"><?php gb_e('Sold Out!') ?></a>
                            <?php else : ?>
                            <a class="button"><?php gb_e('It&rsquo;s over!') ?></a>
                            <?php endif ?>
                        </div>
                        <?php endif ?>
                    </div>
And here's the CSS I'm using (it doesn't include the negative margin):

Code:
.purchase_options {
	position: relative;
	}
	
	.buy_button {
	position: absolute;
	background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button.png) no-repeat center;
	color: white;
	height: 67px;
	width: 375px;
	left: -36px;
	z-index: 9999;
	}
	
	.button {
	background-color: transparent;
	color: #FFFFFF;
	}
		
	.button:hover {
	background-color: #ffffff;
	color: white;
	}
	
	.buy_button a {
	font-weight: bold;
	font-size: 29px;
	font-family: arial;
	padding: 12px;
	display: block;
	white-space: nowrap;
	position: relative;
	}
And here's a link to the page. My problem is with the top red button at the left.

I would greatly appreciate any help!
Kat
#container #div #float #main
  • Profile picture of the author Patrick
    Where is the link to the page ?
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[7493874].message }}
    • Profile picture of the author katindo
      Originally Posted by schwarzes View Post

      Where is the link to the page ?
      Hello schwarzes!

      Heres' the link to the page 40

      There was a development after I posted the question. I changed the overflow of the main container from 'auto' to 'visible' and that brought the button on top, but now the container won't expand according to the content in it!
      {{ DiscussionBoard.errors[7496782].message }}
      • Profile picture of the author Patrick
        Originally Posted by katindo View Post

        Hello schwarzes!

        Heres' the link to the page 40

        There was a development after I posted the question. I changed the overflow of the main container from 'auto' to 'visible' and that brought the button on top, but now the container won't expand according to the content in it!

        Add this in your css file and that will be fixed...

        Code:
        #deal_single.clearfix:after {
    clear: both !important;
}
        Signature
        Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
        {{ DiscussionBoard.errors[7496859].message }}
        • Profile picture of the author katindo
          Originally Posted by schwarzes View Post

          Add this in your css file and that will be fixed...

          Code:
          #deal_single.clearfix:after {
    clear: both !important;
}
          I really can't thank you enough! It was driving me crazy!
          Have a great day!
          {{ DiscussionBoard.errors[7496912].message }}

Trending Topics