product layout using css

[pinbrook]

using clean css theme, with standard product css layout

what css should i use to ensure there is no wrapping around the image. ie when the product detail uses more depth than the image I want the detail to stay to the right and not drop into the space below the image

[jubbbird]

You COULD create a couple (one?) extra style to ensure that the text is inside its own "block". That way the containing block obviously wont wrap around the image. IE and FireFox (for example) render "Float" differently, therefore you might get away with using "display:inline" to get the text block and image to align next to each other.

[jont]

The simple CSS property designed for that is "clear"

[jont]

IE and FireFox (for example) render "Float" differently

Not so much the float that may cause any issues but the box model - this can be prevented by declaring width, margins and borders so IE(6) behaves properly

[pinbrook]

can you expand some more on clear please

do I apply it to the css of the image?

I've changed this ...

.image_product {
margin: 0px 18px 10px 0px;
text-align: center;
float: left;
clear: right;

this has no effect, the price and quantity boxes still wrap underneath the image

clear:left doesn't have the desired effect either, I couldn't work out if I needed left ot right

[RobSollars]

If I'm understanding the issue correctly, it can be solved by giving the text a margin.

If you have a left floated image and you want the text to not occupy the space beneath the image, you can give the text block a margin-left value of the image's width. This should create a two column effect, with the image in a left aligned column with nothing underneath and the text on the right.

Therefore, your CSS will look something like this:

.image_product {
float: left;
}

.product_description { /* The text that goes next to the image */
margin-left: /* the maximum width of the image goes here */
}

Sorry if I've misunderstood the question, I wasn't too clear (no pun intended) on what it was you were looking for. I hope that's of some help. Unfortunately, if the image's maximum width unknown, this technique is pretty redundant. If this is an issue, there's probably some other way of doing it.
________

[pinbrook]

almost...

the problem is the standard product css layout - this has image to the left , no problem so far.

it also has product title, reference, price, description, quantity etc etc. to the right of the image. If all ofthe above info takes up more room than the height of the image the detail then jumps to the left margin below the image.

This looks very untidy, as sometimes it will jump with a product description, but it also has the effect of sometimes have a price to the right or the page and sometimes to the left of the page.

See http://www.grail.pinbrook.net/acatalog/Computers.html this is the standard actinic shop, the 2nd computer suffers this effect, some of the drop boxes, wrap to the left under the image

All images are standard size so the magin idea is doable, i guess I could do it with a div margin wrapped around all the product info.

I predict this it going to be an often asked question in the future

[cdicken]

Jo - try using the layout called 'CSS Product Layout'. I think this will do what you want.

[pinbrook]

Ok for the record - my solution.

withinthe css file, add

.product_margin {
margin: 20px 0px 20px 200px;
}

change the 200 to be the space required by the image (my images are 150 wide)

Add the following <div class= "product_margin">blahblah</div> to the product layout code.

I chose to start the class statement on line 15

<div class="image_product"><actinic:variable name="ProductImageLayout" /></div>
<div><div class ="product_margin">

and ended it on line 61

<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />
</div>
</div> <!-- goes with product_margin -->

[pinbrook]

Chris - my layout says it is "Standard Using CSS" is there another css layout for products?

[cdicken]

There are three product layout with 'CSS' in them:

Standard Layout Using CSS
Compact Layout Using CSS
CSS Product Layout

It's the third one I am referring to.

[pinbrook]

Yep, I just found this, changing from Standard Layout Using CSS, to CSS Product Layout does the trick