align div

http://westflowers.ro/crizanteme/6-crizanteme-roz-3-crizanteme-albe-si-2-criznteme-galbene-cadou-special

How to display inline the options checkbox image?

 

I'd like to help you but first of all - width of the containing column is not wide enough to display the check boxes (and images) inline.

 

I would like to be displayed inline and those that do not fit occur below the rest.

 

That looks like it's missing some HTML. Did you code it yourself?

 

You need to wrap each of the checkboxes and images in a wrapper. Then float that wrapper left for each element. Change the width to suit your requirements.

[css]
.wrapper{float:left;width:80px;}
[/css]

<div class="wrapper">
<input type="checkbox" name="option[423][]" value="25" id="option-value-25" />
<img src="[URL='http://westflowers.ro/image/cache/data/vaza%20cilindrca%20colorata-50x50.jpg']http://westflowers.ro/image/cache/data/vaza cilindrca colorata-50x50.jpg[/URL]" alt="Vaza colorata +49.00 Lei" />
<br />
<label for="option-value-25">Vaza colorata (+49.00 Lei)</label>
</div>
 

HTML:

Ideally you should be placing all of these checkboxes in a unordered list, I will leave that for you to decide.

 

Exactly what this guys said ^^

You'll also need to mess with the margin/padding to get it how you want it.

 

One bit of advice -- put the image in the label. That way clicking the image also does/undoes the checkbox... part of why labels are nice, they select or check the input/textarea they are pointed at with FOR.

Of course, you could put it ALL in the label (since wrapping an input with a label is valid) saving yourself a extra DIV huggystudios was suggesting. If you have the room and don't mind spaces, you could then set that label to display:inline-block instead of floating them.

I'd also consider moving the checkbox down with the text so the image can be centered... and maybe the colored and uncolored vase versions should be radio buttons instead of checkboxes?

There are more changes I'd suggest, but given the complete lack of semantic markup on the page they'd be a waste of time unless it was thrown out completely and started over -- something that may be worth considering with the 44k of markup for 2.2k of plaintext and a dozen content images; easily three to four times what should have been used there.

 

problem solved....