CODEWITHSUNDEEP
phphtmlcss
Ryan Deckard
Ryan Deckard

Reputation: 78

How to create two dynamic text columns that run down a page inline with one another

What I'm looking for is a way to print two complete form elements next to each other as they go down a php page. Essentially two columns of repeating elements.

I have a "div" loop that creates multiple elements on my page using the same div I guess? I'm using two variables to set their location on the page as it goes down, ex. ($down += 200, $left += 200) and it works pretty well. The problem I'm facing is that I have to put an excessive amount of space between each element because some parts are 20px tall and some are 50px tall. With the div loop it looks like they're not aware of each other as far as I can tell meaning all the smaller ones cause the next larger element not to move far enough down the page making them overlap. It'd rather not account for each individual one to only have it do extra space on the smaller ones. I feel like there should be a better option for this. I would also like to avoid a table unless someone can show me a table without the table portion and just the formatting.

while ($results = mysqli_fetch_assoc($towerquery))
                    {
                    if ($number % 2 == 0 && $number !== 0 ){ $left = 200;  $down += 320; }
                    print '<span style="display:block;position:relative;left:'.$left.'px;top:'.$down.'px;font-family:tahoma;font-size:13px;margin:40px;">';
                    $down -= 300;
                    $left += 500;
                    }

Upvotes: 1

Views: 348

Answers (2)

Ryan Deckard
Ryan Deckard

Reputation: 78

The answer above definitely what lead me down the path to victory and dominance of my webpage, but I had to add a separate part to make it work for me which I have posted below

$number = 0;
if ($number % 2 == 0 || $number == 0 ) { print '<div class="eqHWrap eqDisplay">'; }
print '<div class="eqHW equal">';
print '<p>';

//multiple if statements, span elements, line breaks, returns

print '</p>';
if ($number % 2 !== 0 && $number !== 0 ) { print '</div>'; }
print '</div>';
$number++;

This extra code allowed me to only use one div and have it execute as two, because I'm pulling from an array of IPs and I can't get current and get next at the same time due to the coding disasters I kept running into. I assume other people run into the same problem when creating a loop to pull from an array as you can typically only do one at a time in sequence. My code is now successfully working though as seen below in the link!

Upvotes: 1

Jaime
Jaime

Reputation: 102

You can always use Flexbox to create equal height divs:

.paddingBlock {
  padding: 20px 0;
}

.eqDisplay {
  display: flex;
}

.equal {
  padding: 10px;
}

.equal:nth-of-type(odd) {
  background: darkgreen;
}

.equal:nth-of-type(even) {
  background: black;
}

.eqHW {
  flex: 1;
}

.eqHWrap {
  justify-content: space-between;
  color: #eee;
}
<div class="paddingBlock">
  <h1>Equal Column Height</h1>
  
  <div class="eqHWrap eqDisplay">
    <div class="eqHW equal">
      <p>Using</p>
      <p>flex</p>
    </div>
    
    <div class="eqHW equal">
      <p>works</p>
      <p>well</p>
      <p>despite</p>
      <p>content</p>
      <p>length</p>
    </div>
  </div>
</div>

Using that in php you could echo the results:

<?php
    $yourVariable = array(1,9,5,12,73);
    echo '<div class="paddingBlock"><div class="eqHWrap eqDisplay">';
    while (x === x) {
        echo '<div class="eqHW equal">' . $yourVariable . '</div>';
    }
    echo '</div></div>';
?>

Upvotes: 1

Related Questions