0

every second item needs to be on right side of the page, but inline with first item, so it would create 2x2 type grid of both echoed items.

I added some CSS like this .container{float:left; width:50%;} but it didn't work.

if ($file6 % 2 == 1)
{
echo '<div id="container">
    <div id="thumbnail">
            <a href="/images/tirgus/'. $file .'"  title="'.cleanString($file).'" class="thickbox"><img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" /></a>
        </div>
    <br>
    <div id="info1"><sub>' .cleanString($file2).'</sub></div>
    <br>
    <div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
      <div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
        </div><widgets><customization><css>  <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
 }
 else if ($file6 % 2 == 0) {
 echo '<div id="container2">
    <div id="thumbnail2">
            <a href="/images/tirgus/'. $file .'"  title="'.cleanString($file).'" class="thickbox"><img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" /></a>
        </div>
    <br>
    <div id="info1"><sub>' .cleanString($file2).'</sub></div>
    <br>
    <div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
      <div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
      </div><widgets><customization><css>  <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
  }

}

Improve this question
1
  • Please avoid echoing html elements in your php. This architecture is dirty, you'll soon find out later how cumbersome it is to manage code with this kind of style. :) Commented Sep 15, 2013 at 8:32

3 Answers 3

Reset to default
2 
.container{float:left; width:50%;}

will be want you want. FYI, please DO NOT use duplicate ids in your html.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I'm sorry for bad example, from now I will try to differentiate ids, when asking for help.
@RonaldsMazītis - your id names are not offensive. jasonslyvia is warning you that you are applying the same id to multiple elements by the nature of outputting them in a loop. This is advice (also mentioned in my answer) that you need to apply to your actual code, not to the question.
0

In the interest of showing how you would use a modulo to achieve this, you would want to do something like:

foreach($files as $file_count => $file) {
  if ($file_count % 2 == 0)
    {
    echo '<div class="thumb row">';

    }
    echo ' 
    <div class="container">
        <div class="thumbnail">
                <a href="/images/'. $file .'"  title="'.cleanString($file).'" class="thickbox">
                <img src="/images/'.$row['id'].'.jpeg" width="141" height="74" alt="image" />
                </a>
        </div>
        <br />
        <div id="info"><sub>' .cleanString($file2).'</sub></div>
        <br />
        <div id="info"><sub>text ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div>
        <br />
        <div id="info"><sub>text </sub> ' .cleanString($file5). '</div>
        <br />
    </div>';

  if ($file_count % 2 == 1)
    {
    echo '</div>';
    }
}

Note that the above will probably not work as-is with your script because I am using a made up array that loops with the value $file while your code appears to have the various values in separate arrays. The overall idea is this:

foreach($files as $file_count => $file) {

Loops over each image/file you are wanting to output, starting at 0, so that :

$file_count % 2 == 0

indicates the first of two pair and

$file_count % 2 == 1

indicates the second of two pair.

So before the first of two are output, you start a container div such as:

<div class="thumb row">

Then you output your interior html as you already are, using the same html for both thumbnails.

and after the second of two are output, you close that div via:

</div>

Now each two of your thumbnail divs are wrapped in the thumb row container div, allowing you to apply css such as:

.thumb.row .container {
      display: inline-block;
 }

which will line them up side by side but still break on the outer row div.

Also, in addition to this being an ill-advised approach, you should not be setting the id attribute inside a loop, as this will set the same id to multiple elements, which is invalid HTML. Instead, update the code to use class which can be applied to multiple elements.

Improve this answer

2 Comments

So I found solution, by adding multiple css gallery css - .container1{float:left; width:50%;} and gallery2.css - .thumb.row .container { display: inline-block; } .container2{float:right; width:50%;}
Yeah, there are a lot of better solutions. That was a given. The above works with the parameters you gave, which I thought was interesting enough to describe a possible solution. You could also achieve this without floats at all, fyi.
0

Each div need to use different classes/ids, where the inline behavior is defined or not.

$col[0] = 'class1';
$col[1] = 'class2';

for ($i=0; $i<$count; $i++) {

    $output .= '<div class="'. $col[$i%2] . ' >';

}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.