PHP Echo'd in CSS

Question

I have a PHP script which echos in a div, which had another div inside of it. I am stumped, and I want to know how to make the second div seperate from the first one, so that one will be on one side and the other on the other side.

Here's the PHP

  echo '<div class="viewpost">';
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    }
  echo '</div>';

Here's the CSS

.vpside {
    height:100%;
    width:12%;
    display:block;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.vpside1 {
    width:10%;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.viewpost {
    margin-bottom:25px;
    background-color: #000;
    border: 5px solid white;
    border-radius:10px;
}

p.viewpost {
    background-color: #000;
}

.viewpost1 {
    border-bottom: 5px solid white;
    }

You could end up with invalid HTML here. For example if $row['first_name'] is empty but $row['gender'] is not, you'll have an extra closing tag. — jd182
– jd182, Commented Jan 26, 2014 at 15:56
@user2544765 That's what @jd182 is trying to say. If $row['first_name'] or $row['gender'] are going to be empty then you will have invalid HTML code being echo'd from PHP. — Vince
– Vince, Commented Jan 26, 2014 at 16:14

Anonymous · Accepted Answer · 2014-01-26 16:00:26Z

You can just end the first div before you define the other div to separate them. For example:

<?php
  echo '<div class="viewpost">';
  echo '</div>'; //Bottom line moved here
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    }
?>

Or if you wanted to keep the <p> inside the one div:

<?php
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  echo '<div class="viewpost">';
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    echo '</div>';
    }
?>

Then, if you want them to be side by side, add display: inline-block to each div:

.vpside {
    height:100%;
    width:12%;
    display: inline-block; /*changed from display: block*/
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.vpside1 {
    width:10%;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.viewpost {
    margin-bottom:25px;
    background-color: #000;
    border: 5px solid white;
    border-radius:10px;
    display: inline-block; /*added*/
}

p.viewpost {
    background-color: #000;
}

.viewpost1 {
    border-bottom: 5px solid white;
}

Collectives™ on Stack Overflow

PHP Echo'd in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related