Horizontal rule displayed at the wrong section

HTML-CSS
1

Hey guys!

I am trying to place a few horizontal rules on my page and it is shown in the incorrect position. Here is part of my code:


echo '<div class="update_heading">';
                                 echo '<b><h2>Below are your premium membership information for Level 1</b></h2>';
                                 echo '</div>';
                                 echo '<br></br>';
                                 echo '<div class="update_text">';
                                 echo '<h3>';
                                 echo 'Your premium membership subscription plan A is: <div class="information">'.$row['subscriptionplan'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership date of subscription for subscription plan A is: <div class="information"> '.$row['subscriptionplandate'].'</div>';
                                 echo '<br></br>';
                                 if ($row['feesmonthly'] === null) {
                                     echo 'Your premium membership fee for subscription plan A is: <div class="information"> $'.$row['feesyearly'].'</div>';
                                 } else {
                                     echo 'Your premium membership fee for subscription plan A is: <div class="information"> $'.$row['feesmonthly'].'</div>';
                                 }
                                 echo '<br></br>';
                                 if ($row['paid'] == 0) {
                                      echo 'Your premium membership payment status for subscription plan A is: <div class="information"> Not paid </div>'; 
                                 } else {
                                      echo 'Your premium membership payment status for subscription plan A is: <div class="information">Paid</div>';
                                 }
                                 echo '<br></br>';
                                 echo 'Your premium membership expiry date for subscription plan A is: <div class="information">'.$row['expirydate'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership paid by date for subscription plan A is: <div class="information">'.$row['paidbydate'].'</div>';
                                 echo '<br></br>';
                                 if ($row['emailreminder'] == 0) {
                                    echo 'You have <div class="information">no overdue fees </div> for subscription plan A';
                                 } else {
                                      echo 'You have <div class="information"> overdue fees </div> for subscription plan A';
                                 }
                                 echo '<br></br>';
                                 if ($row['activate'] == 0) {
                                    echo 'You <div class="information">need to activate</div> your premium membership for subscription plan A';
                                 } else {
                                      echo 'You <div class="information">have already activated</div> your premium membership for subscription plan A';
                                 }
                                 echo '<br></br>';
                                 echo '<br></br>';
                                 echo '</h3>';
                                 echo '</div>';
                                 echo '<hr>';
                                 echo '<div class="update_heading2">';
                                 echo '<b><h2>Below are your premium membership information for Level 2</b></h2>';
                                 echo '</div>';
                                 echo '<br></br>';
                                 echo '<div class="update_text2">';

There should be a horizontal rule before my second h2 tag but it is showing up here instead:

image
image1920×573 11.9 KB

I forgot to add, must I use the position property to move them? Is this out of position normal for hr tag?

2

They are after the h3 tag that wraps that entire block of stuff. Also if you’re needing to apply positioning attributes to it you’ve done something wierd, it should just appear in the place you’ve applied it in the HTML.

Again though,

a. that is not how <br> tags are defined,
b. You shouldn’t need them, you should use CSS,
c. Why are you writing this code as strings when PHP allows you to write it as HTML (that’s the entire purpose of PHP), you are making things incredibly difficult for yourself

Edit: write the HTML and CSS first and get that right. At the minute I get the impression it is a massive mess. Use CodePen or similar to just write HTML and CSS and get that right. You can convert that into PHP later, but at the minute (possibly mainly because of the strange way you have done it?), both you and anyone here cannot accurately see what the structure of the HTML/CSS is while you’re developing, you’ve made it extremely difficult for yourself.

At the minute it is difficult to help because we cannot run the code you have. If you show a version of it on CodePen, just HTML/CSS with dummy values, we can easily help you fix it

3

Ok… thanks and I will use codepen to put just the html and css… I don’t understand what do you mean in your point c)? I have been following a tutorial…

4

PHP is a templating language, that’s its original purpose. The entire language allows you to write HTML with a .php extension instead of .html, and anything within the special PHP tags gets evaluated by the PHP interpreter and converted into HTML as well. There are some subtleties, and as it’s become a general-purpose language things have changed slightly, but that’s still the core of what PHP is

There’s absolutely no need to echo out strings for each individual line of HTML, this is crazy. I know why you’re doing it like this, but it’s false economy, you’re just making things difficult for yourself needlessly. Do the tiny bit of extra work to render a template there, don’t just glue massive strings together