I am trying to align two divs side by side

Question

I am having problems messing with some css to get it to look the way I want.

Here is the page: https://diggardensnursery.com/shop/house-home/

I would like catalog the image to be on the left, with the description to the right and the attributes and add to cart below.

I have tried to float the divs to the left and the right. I'm not sure if I have to stick the image in a div and float it left separately. I'm not too versed with PHP so I've been trying to mess with just the CSS to get it to work.

Any help?

Thanks so much! Alisha

Answer 1

In your site you've got a ton of stuff floating. This is not the best way to do it. Float isn't the same as position, so I think all the things you have set to "float-right" aren't doing what you think. You don't want to float stuff all over the place, just one thing.

In this case the only thing you should be floating is the image, you just need to float that one object left and use it's margins and paddings to line up everything else.

This is a good reference that should help you to get more control over floats.

As for fixing your page:

First, you need to make the image float left. Put sufficient padding to the right, and if necessary put a lot of padding above/below to make things not wrap underneath the image.

div.product_grid_display div.product_grid_item img {
    border:medium none !important;
>>> float:left;
>>> padding:0 20px 35px 0; /*this padding worked for me */
}

Second turn off this float left and add a clear:both property;

div.product_grid_item {
>>> float:left; /*DELETE THIS LINE*/
    height:auto !important;
    margin:4px 8px 8px 0;
    position:relative;
    clear:both;
}

Turn off the float on div.grid_product_info, div.product_text, and input.wpsc_buy_button as well, and I would add "margin:10px 0 0 28px;" to input.wpsc_buy_button.

You don't need the divs called "div.grid_view_newline" if you add a "clear:both" to div.product_grid_display, so I'd get rid of that.

That should take care of it.

I hope this helps, please let me know if you've got any more questions about it, and please remember to upvote this answer and check this answer as "the answer" if this solves your problem!

Thanks.

Answer 2

use "float:left;" example: http://www.citiport.net/Sandbox/Jeff/pictureBorder.html

Answer 3

If I understand your question then you need to use spans inside of divs.

<div>
   <span>image</span>
   <span>description</span>
</div>
<div>
   <span>buttons</span>
</div>