solidariti
07-29-2009, 05:57 AM
Hi All,
I have a CSS issue with 3 rows of 3 div boxes, that for some reason I can't seperate into a grid format, I would like to enclose them with boxes that do not touch. However because of the variable length of some of the boxes the .inner class I'm using with min-height:290px; doesn't some to work.
Does anyone have any thoughts on this?
Link: http://tinyurl.com/l92tl3
Get past the .htaccess login
username: newmovement
password: newmovement
CSS
#products-page { margin-right:-10px; }
#products-page .product { float:left; background:#fbfbfb; width:295px; margin-right:10px; }
#products-page .product .inner { min-height:290px; }
#products-page .new-row { clear:both;}
.inner { padding:20px; }
#products-page .last-child { margin-right:0; }
#products-page .product img { margin-bottom:15px; border:1px solid #aaa; }
HTML
<div id="products" class="clearfix">
<div class="new-row">
<div class="product">
<div class="inner">
<h2><a href="personal-training" title="One to One personal training">One to One personal training</a></h2>
<p>Highly inspirational one to one sessions based in a boutique, lavishly equipped studio. Techniques and products such as TRX suspension training, Powerplate, Kettlebells, Boxing, Yoga, Functional movement and Pilates to name just a few will design the desired body that you require.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="exercise-camps" title="Exercise Camps">Exercise Camps</a></h2>
<p> A range of camps delivered to firm goals. Fat loss, Strength & Conditioning, Sports Specific, Pre/Post natal, Ultra Fit to name a few. These 10 week courses will educate, motivate and continuously challenge you to reach you peak. Be expected to achieve world class results as they are the only option for those involved. You’ll be taught cutting edge techniques, use highly innovative equipment and find a body that you never knew existed.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="#" title="">Educational workshops</a></h2>
<p>To provide knowledge on how to lead a healthier, more active and intelligent lifestyle. Solid nutritional principles, basic yet highly effective exercise methods and nlp techniques will help you get goals, achieve results and re-energize.</p>
</div>
</div>
</div><!-- new-row -->
<div class="new-row">
<div class="product new-row">
<div class="inner">
<h2><a href="swedish-sports-massage" title="Swedish/Sports massage">Swedish/Sports massage</a></h2>
<p>The practice of soft tissue manipulation with physical, functional, and in some cases psychological purposes and goals. Benefits include relief from muscular pain, reduce stress, help reduction of blood pressure, lower heart rate, removal of toxins and improve mobility. The perfect way to unwind after a tough training session or for pure indulgence just to pamper yourself.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="12-week-make-over" title="12 week make over">12 week make over</a></h2>
<p>A Life changing Personal Experience. The 12 week make over will transform you inside and out. You'll receive cutting edge 1 on 1 personal training, Sports Massage, Weekly Analysis and reviews, tailored nutritional guidance and a wealth of education to ensure that success is the only outcome. With Payment split into 3 monthly installments over the 12 week period it allows everyone the opportunity to experience life changing results that this fantastic product has to offer. If you’re serious about change then you’re only 12 weeks away from allowing us to create the success you deserve.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="small-group-exercise" title="Small Group Exercise">Small Group Exercise</a></h2>
<p>Group exercise classes based on various training principles such as Boxing Fitness, Circuit Training, Stability Ball, Walking Groups, Sports Team Conditioning, Stretch & Posture classes and Street Dance. Set venues, days and times within the local community or bespoke classes can be created for your very own group.</p>
</div>
</div>
</div><!-- new-row -->
<div class="new-row">
<div class="product">
<div class="inner">
<h2><a href="weight-loss-camps" title="Weight loss camps">Weight loss camps</a></h2>
<p>Dedicated, Inspiring trainers and successful techniques to give you the weight loss result you’ve always wanted. This 10 week course comprises of both Exercise and Nutritional components. Weekly weigh ins and goal setting help keep you on track and allow us to ensure you reach nothing short of inspirational results.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="e-personal-training" title="E Personal Training">E Personal Training</a></h2>
<p>Pocket PT Provides the Complete virtual Personal Training Experience. You’ll be supplied with a Unique Personal Programme, Thorough Instruction and Downloadable Videos to your ipod, mp3 video player, mobile phone etc. Have all the benefits of a personal trainer to help Motivation, track your progress and provide support. We also supply you with Fitness/Nutritional advice ranging from beginners to advanced. Highly beneficial yet low on cost.</p>
</div>
</div>
<div class="product last-child">
<div class="inner">
<h2><a href="#" title=""></a></h2>
<p>help keep you on track and allow us to ensure you reach nothing short of inspirational results.</p>
</div>
</div>
</div><!-- new-row -->
</div><!-- products -->
Thank you.
I have a CSS issue with 3 rows of 3 div boxes, that for some reason I can't seperate into a grid format, I would like to enclose them with boxes that do not touch. However because of the variable length of some of the boxes the .inner class I'm using with min-height:290px; doesn't some to work.
Does anyone have any thoughts on this?
Link: http://tinyurl.com/l92tl3
Get past the .htaccess login
username: newmovement
password: newmovement
CSS
#products-page { margin-right:-10px; }
#products-page .product { float:left; background:#fbfbfb; width:295px; margin-right:10px; }
#products-page .product .inner { min-height:290px; }
#products-page .new-row { clear:both;}
.inner { padding:20px; }
#products-page .last-child { margin-right:0; }
#products-page .product img { margin-bottom:15px; border:1px solid #aaa; }
HTML
<div id="products" class="clearfix">
<div class="new-row">
<div class="product">
<div class="inner">
<h2><a href="personal-training" title="One to One personal training">One to One personal training</a></h2>
<p>Highly inspirational one to one sessions based in a boutique, lavishly equipped studio. Techniques and products such as TRX suspension training, Powerplate, Kettlebells, Boxing, Yoga, Functional movement and Pilates to name just a few will design the desired body that you require.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="exercise-camps" title="Exercise Camps">Exercise Camps</a></h2>
<p> A range of camps delivered to firm goals. Fat loss, Strength & Conditioning, Sports Specific, Pre/Post natal, Ultra Fit to name a few. These 10 week courses will educate, motivate and continuously challenge you to reach you peak. Be expected to achieve world class results as they are the only option for those involved. You’ll be taught cutting edge techniques, use highly innovative equipment and find a body that you never knew existed.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="#" title="">Educational workshops</a></h2>
<p>To provide knowledge on how to lead a healthier, more active and intelligent lifestyle. Solid nutritional principles, basic yet highly effective exercise methods and nlp techniques will help you get goals, achieve results and re-energize.</p>
</div>
</div>
</div><!-- new-row -->
<div class="new-row">
<div class="product new-row">
<div class="inner">
<h2><a href="swedish-sports-massage" title="Swedish/Sports massage">Swedish/Sports massage</a></h2>
<p>The practice of soft tissue manipulation with physical, functional, and in some cases psychological purposes and goals. Benefits include relief from muscular pain, reduce stress, help reduction of blood pressure, lower heart rate, removal of toxins and improve mobility. The perfect way to unwind after a tough training session or for pure indulgence just to pamper yourself.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="12-week-make-over" title="12 week make over">12 week make over</a></h2>
<p>A Life changing Personal Experience. The 12 week make over will transform you inside and out. You'll receive cutting edge 1 on 1 personal training, Sports Massage, Weekly Analysis and reviews, tailored nutritional guidance and a wealth of education to ensure that success is the only outcome. With Payment split into 3 monthly installments over the 12 week period it allows everyone the opportunity to experience life changing results that this fantastic product has to offer. If you’re serious about change then you’re only 12 weeks away from allowing us to create the success you deserve.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="small-group-exercise" title="Small Group Exercise">Small Group Exercise</a></h2>
<p>Group exercise classes based on various training principles such as Boxing Fitness, Circuit Training, Stability Ball, Walking Groups, Sports Team Conditioning, Stretch & Posture classes and Street Dance. Set venues, days and times within the local community or bespoke classes can be created for your very own group.</p>
</div>
</div>
</div><!-- new-row -->
<div class="new-row">
<div class="product">
<div class="inner">
<h2><a href="weight-loss-camps" title="Weight loss camps">Weight loss camps</a></h2>
<p>Dedicated, Inspiring trainers and successful techniques to give you the weight loss result you’ve always wanted. This 10 week course comprises of both Exercise and Nutritional components. Weekly weigh ins and goal setting help keep you on track and allow us to ensure you reach nothing short of inspirational results.</p>
</div>
</div>
<div class="product">
<div class="inner">
<h2><a href="e-personal-training" title="E Personal Training">E Personal Training</a></h2>
<p>Pocket PT Provides the Complete virtual Personal Training Experience. You’ll be supplied with a Unique Personal Programme, Thorough Instruction and Downloadable Videos to your ipod, mp3 video player, mobile phone etc. Have all the benefits of a personal trainer to help Motivation, track your progress and provide support. We also supply you with Fitness/Nutritional advice ranging from beginners to advanced. Highly beneficial yet low on cost.</p>
</div>
</div>
<div class="product last-child">
<div class="inner">
<h2><a href="#" title=""></a></h2>
<p>help keep you on track and allow us to ensure you reach nothing short of inspirational results.</p>
</div>
</div>
</div><!-- new-row -->
</div><!-- products -->
Thank you.