-1

Problem: So on this site, there is a products page. On this page, there is a tabbed box with a picture floating to the left of it. When the 'specs' tab is clicked, it expands into a long list of details for the product showcased to the left of it. However, when it expands, it pushes down the content from the product below but not the image.

Things I have tried: I tried putting elements in the 'commercial' product in a div so that everything can be pushed down but got the same result. I tried giving the div holding the specs tab a position of relative and a css rule of 'height:auto'. Nothing Ive tried seems to work.

Solution: Would like for when you click on the specs tab for the 'residential' product that it pushes down all elements of the 'commercial' product and not just the text.

Joomla version: 3.4.4

Joomla plugin using: Tabs and Sliders from JoomlaWorks

Link to website: http://www.iusepv.com/solar-panels-generators-north-carolina-winston-salem/

HTML Code:

<p> </p>
<hr />
<p style="float: left;"><img src="images/13kw-generator.png" alt="" width="174" height="174" /></p>
<p> </p>
<div class="mob-only" style="float: right; width: 70%;">
<p style="color: green; font-weight: bold; font-size: 27px;">RESIDENTIAL</p>
<p style="font-size: 14px; font-weight: bold; color: #989898;">13kw Generator System by GE with Symphony II 200A (SED)</p>
<p style="color: green;">You don't need a larger generator. Just a smarter one.</p>
<p style="margin-bottom: 1%;"> </p>
<p>{tab=Description} In the past, selecting a home generator system meant choosing between a smaller unit that would only power the barest essentials, or a much larger, more fuel-hungry and costly unit. Our 13kW Home Generator System is perfect for smaller to medium-sized homes. The installation would include the Symphony® II Power Management System which would allow you to meet the power needs of your whole house, (including up to two 4-ton air conditioners). Compared to other whole house generators, this unit has a 15% smaller footprint and blends in beautifully with your home’s exterior. This home generator also features one of the best comprehensive parts and labor warranties in the business - 4 year limited warranty. {tab=Specs}</p>
<strong>Watts(LP)</strong> | 13000<br /> <strong>Watts(NP)</strong> | 11500 <br /><strong>Engine Brand</strong> | Briggs &amp; Stratton <br /><strong>Engine Series</strong> | Professional Series <br /><strong>CC</strong> | 810<br /><strong>Number of Cylinders</strong> | 2 <br /><strong>Operation</strong> | Fully Automatic <br /><strong>Voltage(V)</strong> | 120/240 <br /><strong>Amps (240V):(LP)</strong> | 54.2 <br /><strong>Amps(240V):(NG)</strong> | 47.9<br /><strong>Alternator Type</strong> | Brushed <br /><strong>Fuel Consumption(Cubic Feet per Hour @ Half Load)</strong> | 93(NG), 49(LP)<br /> <strong>Fuel Pressure Lubrication</strong> | Yes <strong>Weekly Exerciser</strong> | Yes <br /><strong>Battery/Battery Charger</strong> | Battery Sold Separately, Battery Charger Included<br /> <strong>Overcrank Protection</strong> | Yes<br /> <strong>Hour Meter</strong> | Yes <br /><strong>Diagnostic Alerts with Remote System Status</strong> | No <br /><strong>Length</strong> | 34.6" <br /><strong>Width</strong> | 39.4" <br /><strong>Height(lbs)</strong> | 540<br /> <strong>Weight(lbs)</strong> | 484<br /> <strong>Warranty</strong> | 4 Year Limited Parts and Labor <br /><strong>MSRP</strong> | $3,299.00{tab=Images} <a title="Interior of Generator" href="images/image001.jpg" rel="sexylightbox"><img style="margin-right: 3px;" src="images/image001.jpg" alt="" width="100" height="100" /></a><a title="Sizes and Height" href="images/image002.jpg" rel="sexylightbox"><img src="images/image002.jpg" alt="" width="100" height="100" /></a>{/tabs} {loadposition myposition}</div>
<div style="margin-bottom: 60%;"> </div>
<hr />
<p> </p>
<div style="height: 577px;">
<p style="float: left;"><img src="images/17kw-generator.png" alt="" width="174" height="174" /></p>
<div class="mob-only" style="float: right; width: 70%;">
<p style="color: green; font-weight: bold; font-size: 27px;">COMMERCIAL</p>
<p style="font-size: 14px; font-weight: bold; color: #989898;">17kw Generator System by GE with Symphony II 200A (SED)</p>
<p style="color: green;">You don't need a larger generator. Just a smarter one.</p>
<p style="margin-bottom: 1%;"> </p>
<p>{tab=Description} Due to its unique patented air flow design, this is one of our quietest generators yet. The 17kW unit also has advanced safeguards that meet the rigorous industry fire protection standards and is backup with one of the best comprehensive parts and labor warranties in the business - 5 year limited warranty. By using power management, GE Generator Systems power more of your home’s appliances with a smaller, more fuel-efficient home generator that allows your family to have whole-house managed backup power. Experience the tranquility of knowing your family is protected, with the GE 17kW home standby generator.  {tab=Specs}</p>
<div id="sexyContent" style="display: none;"><strong>Watts(LP)</strong> | 17000<br /> <strong>Watts(NP)</strong> | 15300 <br /><strong>Engine Brand</strong> | Briggs &amp; Stratton <br /><strong>Engine Series</strong> | Vanguard <br /><strong>CC</strong> | 993 <br /><strong>Number of Cylinders</strong> | 2 <br /><strong>Operation</strong> | Fully Automatic <br /><strong>Voltage(V)</strong> | 120/240 <br /><strong>Amps (240V):(LP)</strong> | 71 <br /><strong>Amps(240V):(NG)</strong> | 64 <br /><strong>Alternator Type</strong> | Brushed <br /><strong>Fuel Consumption(Cubic Feet per Hour @ Half Load)</strong> | 118 ft(3)/hr, 3.28 gal/hr(Liquid Propane), 248 ft(3)/hr(Natural Gas)<br /> <strong>Fuel Pressure Lubrication</strong> | Yes <br /><strong>Weekly Exerciser</strong> | Yes <br /><strong>Battery/Battery Charger</strong> | Battery Sold Separately, Battery Charger Included<br /> <strong>Overcrank Protection</strong> | Yes<br /> <strong>Hour Meter</strong> | Yes <br /><strong>Diagnostic Alerts with Remote System Status</strong> | Low Oil Shutdown, Engine Does Not Start, Low Voltage, Low Battery Voltage, Oil Temp High, and Transfer Switch <br /><strong>Fault Length</strong> | 48 <br /><strong>Width</strong> | 34 <br /><strong>Height</strong> | 31<br /> <strong>Weight(lbs)</strong> | 484<br /> <strong>Warranty</strong> | 5 Year Limited Parts and Labor <br /><strong>MSRP</strong> | $4,499.00</div>
<p><a title="Sample content" href="#TB_inline?inlineId=sexyContent&amp;height=270&amp;width=400&amp;modal=1" rel="sexylightbox">Click Here for Specifications</a> {tab=Images} <a title="Sizes and Height" href="images/genpic.jpg" rel="sexylightbox"><img style="margin-right: 3px;" src="images/genpic.jpg" alt="" width="100" height="100" /></a>{/tabs}</p>
{loadposition myposition}</div>
</div>

If there is anything else I need to add, let me know.

closed as off-topic by Valentin Despa Jan 8 '16 at 17:36

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question does not appear to be about Joomla! administration and development, within the scope defined in the help center" – Valentin Despa
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Try moving your image line (<p style="float: left;"><img src="images/13kw-generator.png" alt="" width="174" height="174" /></p> ). Instead of having it at the top put it at the bottom (after the closing mob-only div). – jonboy Jan 8 '16 at 8:47
  • No problem, I'll add it as an answer and you can accept :) – jonboy Jan 8 '16 at 17:04
  • @Starlight1992 Sorry, but this is not the kind of questions this website accepts. – Valentin Despa Jan 8 '16 at 17:37
1

Try this;

Move the following line;

<p style="float: left;"><img src="images/13kw-generator.png" alt="" width="174" height="174" /></p>

Instead of having it above your div, add it at the bottom (after the closing mob-only div).

Positioning issue!

Not the answer you're looking for? Browse other questions tagged or ask your own question.