3 Modules in 1 Row?

[PhattyMcGee]

I've been unable to locate any assistance with this one and I've been banging my head off the desk trying to figure this out. Any help is greatly appreciated!

I'm working on this site:
http://www.topgreenlawncare.i-define-design.com

At the very bottom, I'd like to have 3 modules that are side-by-side-by-side and can't figure out how to do so? I've created the 3 new modules (custom HTML) called user9, user10, user11, they show up, however, are stacked vertically, I would like them horizontally spaced 33% respectfully, any ideas?

Here's the code I've got in my index.php now:

Code: Select all

					<div class="cont_pad">
						<?php if ($this->countModules( 'user9 and user10 and user11' )) : ?>
							<div class="user9user10user11">
								<?php if ($this->countModules( 'user9 and user10 and user11' )) : ?>
									<jdoc:include type="modules" name="user9" style="xhtml" />
									<jdoc:include type="modules" name="user10" style="xhtml" />
									<jdoc:include type="modules" name="user11" style="xhtml" />
								<?php endif; ?>
							</div>
						<?php endif; ?>
					</div>

[ljk]

Hi,

Wrap each module is a div with an id, then you can float each div left and give them a width of 33%. You will need to add some margin/padding so the divs have some gutter, but this should get you on the right track.

Something like this:

Code: Select all

               <div class="cont_pad">
                  <?php if ($this->countModules( 'user9 and user10 and user11' )) : ?>
                     <div class="user9user10user11">
                        <div id="box1">
                           <jdoc:include type="modules" name="user9" style="xhtml" />
                        </div>
                        <div id="box2">
                           <jdoc:include type="modules" name="user10" style="xhtml" />
                        </div>
                        <div id="box3">
                           <jdoc:include type="modules" name="user11" style="xhtml" />
                        </div>
                     </div>
                  <?php endif; ?>
               </div>

With CSS like this:

Code: Select all

#box1, #box2, #box3 {float:left; width:33.3%}

[gjlook]

that worked for me too - thanks

in my case i wanted to add two new modules to the showcase region of the clouduniversity template ( everything seems spread out and a bit hard to find in this template )

showcase.php is found in templates/layouts/blocks

edited showcase.php
and added


<?php if ($this->countModules( 'showcase1 or showcase2' )) : ?>
<div class="gjshowcase1and2">
<div id="gjshow1">
<jdoc:include type="modules" name="showcase1" style="xhtml" />
</div>
<div id="gjshow2">
<jdoc:include type="modules" name="showcase2" style="xhtml" />
</div>
</div>
<?php endif; ?>

-----------
then modified templatedetails.xml
and added

<position>showcase1</position>
<position>showcase2</position>

then in template.css
added

#gjshow1, #gjshow2 {float:left; width:50%}

or whatever formatting you feel necessary
eg. #gjshow1 a { color: #069; text-decoration: none; }