PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How to horizontally align two DIV

 November 17, 2022     css, css-float, vertical-alignment     No comments   

Issue

i have this snipet of code and i want to align the variation-options options with the woo-price-area on the right:

        <div class="woo-button-area">

            <div class="variations variation-price-wrap">
                <div class="variation-options">
                    <select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
                            data-show_option_none="no">
                        <option value="opt1" class="attached enabled">Option 1</option>
                        <option value="op2" class="attached enabled">Option 2</option>
                    </select></div>
                <div class="woo-price-area">
                    <p class="price">
                        <del><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
                        <ins><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
                    </p>
                    <div class="wc-availability"></div>
                </div>
            </div>


            <div class="single_variation_wrap">
                <div class="woocommerce-variation single_variation" style="">
                    <div class="font80">
                        <a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
                    </div>
                    <div class="prosconswidget">
                        <div class="wpsm_pros mt20 font80">
                            <ul>
                                <li>Test li</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>

I have tried floating but the details link come over price area.

This is the page url: https://jsfiddle.net/4x93rLmf/21/


Solution

you can target their wrapper class .variations.variation-price-wrap{display:flex;}

.variations.variation-price-wrap{display:flex;  
                                 justify-content:space-between;}
p.price {
    display: flex;
    flex-direction: column;
    margin: 0;
}
<div class="woo-button-area">

            <div class="variations variation-price-wrap">
                <div class="variation-options">
                    <select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
                            data-show_option_none="no">
                        <option value="opt1" class="attached enabled">Option 1</option>
                        <option value="op2" class="attached enabled">Option 2</option>
                    </select></div>
                <div class="woo-price-area">
                    <p class="price">
                        <del><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
                        <ins><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
                    </p>
                    <div class="wc-availability"></div>
                </div>
            </div>


            <div class="single_variation_wrap">
                <div class="woocommerce-variation single_variation" style="">
                    <div class="font80">
                        <a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
                    </div>
                    <div class="prosconswidget">
                        <div class="wpsm_pros mt20 font80">
                            <ul>
                                <li>Test li</li>
                            </ul>

                        </div>
                    </div>
                </div> </div>
            </div>



Answered By - godfather
Answer Checked By - Mildred Charles (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing