Need help with my PHP code - cant get articles to line up in columns

Hello :)

I am designing the frontpage of my website, im using Joomla 1.5 and have customized the Beez frontpage template file (frontpage/default.php) for use in my own template. It is a table-less design.

The layout for frontpage articles (frontpage/default.php file) is a two-column layout. There are six articles set to display on the front page in the two columns.

As you can see from the link - http://www.tomsspecialreserve.co.uk/joomla
there are gaps underneath some articles. I dont want the big gaps. I think the gaps are caused by the line <div class="article_row<?php echo $this->params->get('pageclass_sfx'); ?>"> which is highlighted with a blue border, so I tried removing the line from my code.

Removing the line got rid of the gaps, but sent the frontpage articles way out of position with each other, totally out-of-line with each other, and I am now totally stuck trying to work out how to make the articles line up in columns without any big gaps. Im not good with PHP :o

The code for my frontpage/default.php file is -

<?php
$introcount = $this->params->def('num_intro_articles', 4);
if ($introcount) :
$colcount = $this->params->def('num_columns', 2);
if ($colcount == 0) :
$colcount = 1;
endif;
$rowcount = (int) $introcount / $colcount;
$ii = 0;
for ($y = 0; $y < $rowcount && $i < $this->total; $y++) : ?>

<div class="article_row<?php echo $this->params->get('pageclass_sfx'); ?>">
<?php for ($z = 0; $z < $colcount && $ii < $introcount && $i < $this->total; $z++, $i++, $ii++) : ?>

<div class="article_column column<?php echo $z + 1; ?> cols<?php echo $colcount; ?>" >
<?php echo $this->params->get('pageclass_sfx'); ?>
<?php $this->item =& $this->getItem($i, $this->params);
echo $this->loadTemplate('item'); ?>
</div>
<?php endfor; ?>
</div>
<?php endfor;
endif; ?>

and the CSS is -

.cols1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols2 { width: 45%; }
.cols3 { width: 30%; }

.column1 , .column2
{
border: solid 0px #D4A7C5;
margin: 0 5px 0 0;
position: relative;
}

.column2 , .column1
{
float: left;
margin: 0;
}

.column2
{
float: right;
margin: 0;
width: 45%;
}

.article_row
{
margin: 0px 0 0px 0;
padding: 0;
overflow: hidden;
}

.article_column
{
border: solid 0px #ccc;
padding: 50px 10px 10px 0;
margin: 0px 0px 0px 0px;
}

So I just want two columns eg Column1 and Column2 with the articles in each, lined up and in position, but I think different PHP code is needed to achieve this, and I have looked every where for an example, but cannot find one - HELP!!

This is a CSS issue, not a PHP issue. What gap are you talking about? I don't see any gap that strikes me as out of place, unless you are talking about when an article on one side is shorter than the article on the other side?

The white text on bright green background, now that is horrible.

This is a CSS issue, not a PHP issue. What gap are you talking about? I don't see any gap that strikes me as out of place, unless you are talking about when an article on one side is shorter than the article on the other side?

The white text on bright green background, now that is horrible.

Yes, I am referring to when an article on one side is shorter than the other. I have just removed the line <div class="article_row<?php echo $this->params->get('pageclass_sfx'); ?>"> from the above code on my page, now have a look at the articles positioning, they are all way out of line. Im not sure if it is a PHP or CSS issue

The white text on green background is just for testing, it is not my final color scheme. Once I get the positioning sorted I will make the color-scheme more user friendly :D

If it is a CSS problem (which im still not convinced it is, but correct me if Im wrong) can you offer any help?

Thanks :thumbsup:

PHP doesn't position elements on the web page, CSS does. So yes it's a CSS issue and if you ask for help on the CSS forum you'll find lots of friendly people eager to help you line up your columns.

The best thing for you to do is whip up a test page using CSS that has no PHP in it at all, just straight HTML and CSS. Get the CSS properties working perfectly, then re-create the page with the PHP coding.

PHP doesn't position elements on the web page, CSS does. So yes it's a CSS issue and if you ask for help on the CSS forum you'll find lots of friendly people eager to help you line up your columns.

The best thing for you to do is whip up a test page using CSS that has no PHP in it at all, just straight HTML and CSS. Get the CSS properties working perfectly, then re-create the page with the PHP coding.

I have already whipped up a test html/css page which displaysfine, but if you look at my Joomla/php page using firebug and find the div class called BLOG (inside MiddleWrapper/MiddleWrapperInner/MiddleMain/MiddleContent), you can see that the articles are displaying alternatively eg -

column1 column2 column1, column2 etc etc

They should be displaying like this -
Column1 (Articles for display inside column1), Column2 (Articles for display inside column2). Surely this is a php coding issue related to the way Joomla is ordering the articles because it is happening even before CSS is applied? -

Ah, finally we're getting somewhere. This is the information you should have begun your thread with ;)

Ah, finally we're getting somewhere. This is the information you should have begun your thread with ;)

Ok...so..how do I go about fixing the issue, I am a total novice when it comes to php :)

Any ideas?:confused: