By nyleve101 on

Hi,

I'm looking for a quick CSS fix. I would like to float two boxes next to each, which are presently presented one below the other.
I would like the "product-image", "product-add-to-cart" and "product-rating-box" to be side by side and with the "product-description_content" placed underneath the "product-add-to-cart" and "product-rating-box" boxes on the right hand side.

<div class="content">
    <div class="product-top" style="width:600px;">

        <div class="product-image" style="float:left; padding: 0 20em 4em 3em;">
</div>

<div class="product-add-to-cart" style="margin-left:10px; width: 17em; float:right; margin: 0 0 4em -23em; ">
                           
                <div class="add-to-cart-box" style="width:230px; margin-top:10px; padding:.4em; border:5px solid #ccc; background:#f8f7f7; ">
              <div class="add-to-cart-box_pricing-box" style="background:#fff; border-bottom:1px dotted #000; height:2.6em;">
           <div class="add-to-cart-box_price" style="float:left; color: #00009; font-size:2em; font-weight:bold; margin-top:.2em;">
</div>
                    </div>

<div class="add-to-cart-box_add-to-cart" style="padding:.4em; font-size:.8em; height:23em;">


<div class="product-rating-box" style="margin-left:10px; width: 17em; float:right; margin: 26em 0 4em -18em;">
                           
                <div class="product-rating-box_ratings" style="width:300px; padding:.3em; border:5px solid #ccc; background:#f1f1f1;">
              <div class="add-to-cart-box_pricing-box" style="background:#fff; border-bottom:1px dotted #000; height:12em;">
</div>    
</div>

<div class="product-description_content" style="width:480px;  margin-top:10px; padding:.3em; border:5px solid #ccc; background:#f1f1f1;">
  <div class="product-description_content" style="background:#fff; border-bottom:1px dotted #000;">
</div>
  </div>
</div>

Payment will be made via PayPal.

Thanks in advance!

Evelyn

⋅ Categories: Drupal 6.x

Comments

bwv’s picture

bwv commented

Before you get started, you may want to do a little research to see if this is possible with CSS manipulation alone. The formatting you require *may* necessitate changes to the product template, which will be considerably more time consuming.

jvizcarrondo’s picture

jvizcarrondo commented

I hope this can help you


<div class="content">


    <div class="product-top" style="width:800px;float:left;">

        <div class="product-image" style="float:left; border:1px solid #000;width: 380px;">
product-image
        </div>
<div style=" width: 400px; float:right">

        <div class="product-add-to-cart" style=" width: 200px; float:left;border:1px solid #000;">
product-add-to-cart
                          
                <div class="add-to-cart-box" style="width:200px; padding:.4em; border:5px solid #ccc; background:#f8f7f7; ">
add-to-cart-box
                  <div class="add-to-cart-box_pricing-box" style="background:#fff; border-bottom:1px dotted #000; height:2.6em;">
add-to-cart-box_pricing-box
                    <div class="add-to-cart-box_price" style="float:left; color: #00009; font-size:2em; font-weight:bold; margin-top:.2em;">
add-to-cart-box_price
                    </div>

                  </div>
                  <div class="add-to-cart-box_add-to-cart" style="padding:.4em; font-size:.8em; height:23em;">
add-to-cart-box_add-to-cart
                  </div>
               </div>
       </div>





<div class="product-rating-box" style="width: 100px; float:right;border:1px solid #000;">
                 product-rating-box         
                      <div class="product-rating-box_ratings" style="width:300px; padding:.3em; border:5px solid #ccc; background:#f1f1f1;">
product-rating-box_ratings
                        <div class="add-to-cart-box_pricing-box" style="background:#fff; border-bottom:1px dotted #000; height:12em;">
add-to-cart-box_pricing-box
                        </div>   
                    </div>
</div>

</div>
</div>

                      <div class="product-description_content" style="width:800px;padding:.8em; border:5px solid #ccc; background:#f1f1f1;float:left;">
product-description_content
                         <div class="product-description_content" style="background:#fff; border-bottom:1px dotted #000;">
                         </div>
                      </div>

Bye
Juan

nyleve101’s picture

nyleve101 commented

Juan, thanks for your attempt. It wasn't exactly what i was looking for but it was a good starting point. Thanks for trying!

cmsproducer’s picture

cmsproducer commented

Depending on how much CSS skill you have, you can float the boxes next to each other, and clear left or right to mark a new line of boxes...

Check w3schools.com if you need help understanding CSS

nyleve101’s picture

nyleve101 commented

Thanks for your help.

Evelyn