Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / product name and price on the same line

product name and price on the same line

Locked

Views: 1,144

Results 1 to 2 of 2
This thread is locked. New replies are disabled.
7 Apr 2009, 9:55 AM
#2
twinge avatar

twinge

New Zenner

Join Date:
Jun 2005
Posts:
36
Plugin Contributions:
0

Re: product name and price on the same line

I couldn't really find a good answer to this here or anywhere else, but after screwing with it way too long I have a solution that does at least seem to work okay, even if it's pretty hacky. Since I couldn't find any decent solutions already posted I figured I might as well post it here:

h1#productName {
	margin-top: -12px;
	padding-left: 62px;
	}

h2#productPrices {
	text-align: right;
	position: relative;
	bottom: 22px;
	padding-right: 74px;
	}

#productMainImage {
	width: 98%;
	margin-top: -20px;
	}

(Adjust the right and left padding as appropriate for your image size and overall layout. The bottom amount may need adjusting too if the sizes of your headers or such were changed.)

I'm certainly open to hearing better ideas, but this displays fine in Firefox and IE7 at least. I tried a wide array mixing and matching display:inline, floats, clears, width:50%s, changing the h2 tags for the price to spans or divs... nothing really worked any better than this :P