Display combinations horizontal with css

[sickshot]

Hello.

 

can anyone help me place those boxes shown on attachment 1 to be aligned horizontally side-by-side (as it is shown on attachment 2)

 

this is my CSS

div#attributes { display: none; }

#awp_container {
	clear: both;
}

#awp_attribute_groups {
	list-style: none;
}

#awp_attribute_groups li {
	display: block;
	padding: 20px 10px; margin-bottom: 3px;
	background-color: #efefef;
}

#awp_attribute_groups li img.handle {
	margin-right: 20px;
	cursor: move;
}

#awp_box {background: transparent; margin:0px 0em 10px 0em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#eeeeee; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9;}
.xb1 {margin:0 5px; background:#d9d9d9;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xbtop {background-color:#f3f3f3}
.xbbot {background-color:#ffffff}

.awp_header {
	display:block;
	background:#f3f3f3; 
	border:0 solid #d9d9d9; 
	border-width:0 1px; 
	padding: 0px 10px 5px 10px;
	font-weight: bold;
	font-size: 13px;
}

.awp_description {
	font-weight: normal;
	font-size: 11px;
}

.awp_content {
	display:block; 
	background:#ffffff; 
	border:0 solid #d9d9d9; 
	border-width:0 1px; 
	padding: 10px 10px 5px 10px;
}


/* block top languages */
#awp_languages_block_top {
	margin: 0.4em 0.1em 0 0;
	float: left;
}
#awp_languages_block_top p {
	clear: left;
}
#awp_languages_block_top ul#awp_first-languages {
	float: left;
	height: 1.5em;
	width: 100%;
}
#awp_languages_block_top ul#awp_first-languages li {
	float:left;
	margin-right: 0.3em;
}

#awp_languages_block_top ul#awp_first-languages li.selected_language {
	float:left;
	margin-right: 0.3em;
}

.awp_group_color {
	border : 1px solid #d9d9d9;
}

.awp_group_image {
	border : 1px solid #d9d9d9;
}

.awp_oos {
 	display: none;
}

Edited March 18, 2014 by sickshot (see edit history)

[sickshot]

no?

[vekia]

any chance to see it live somewhere? it will be much easier to help

 

to be honest, these styles that you pasted don't mean anything for me

[safa]

you using paid module (Attribute Wizard Pro) right ?

[sickshot]

hello,

Thank you for reply here is the live link: http://demo.kenari.ge/en/solutions/31-aosept-plus-90ml.html

 

I really tried everything but no success  

Edited March 19, 2014 by sickshot (see edit history)

[sickshot]

safa

yes, it is, but all that developer said was that there's something, somewhere need to be edited. sounds very "professional" from a developer.....  

I thought changes would happen only by my wish and stare (facepalm)

Edited March 20, 2014 by sickshot (see edit history)

[sickshot]

can anyone help me with this please?

[safa]

can anyone help me with this please?

hi;

i maked lens site last year and i used too this paid module

like this

http://prntscr.com/32pngz

 

only css chance not work for this screen. i chanced module's tpl files.

but we have problem this module is a paid module, i can't share module tpl files in here.

[sickshot]

Hello  safa

this is exactly what I'm trying to achieve. yes I understand, but I already  have this module and all I need is code or part of a code not the whole module, which as you know contains lots of PHP, JS file without them this TPL is useless for a person which doesnt own the module...  

Edited March 21, 2014 by sickshot (see edit history)

[vekia]

somewhere in global.css use this
 

.awp_content tr {display:inline-block; float:left; width:90px;}

[sickshot]

Thank you Vekia, i'll give it a try....

[vekia]

it will be necessary to stylize it a bit more, code that i attached placing items linline