If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2018
    Member #

    how to get div services to be side by side?

    Hey guys!

    I am trying to get my services section to work, which is contained in a div box. I have three div boxes and they should line up side by side but I changed the width of one of them and I thought that it should still work but now they don't stack up: I have been following a tutorial on youtube on this... Here is my html and css code: I think the problem could be in the css

    HTML Code:
    include_once 'header.php';
    include_once 'viewcounter.php';
    include_once 'includes/dbh.php';
    include_once 'footer.php';
    $sql = "SELECT * FROM review;";
    $stmt = mysqli_stmt_init($conn);
    //Prepare the prepared statement
    if (!mysqli_stmt_prepare($stmt, $sql)) {
        echo 'SQL statement failed';
    } else {
         //Bind parameters to the placeholder
         //Run parameters inside database
         $result = mysqli_stmt_get_result($stmt);
         $resultCheck = mysqli_num_rows($result);
         while ($row = mysqli_fetch_assoc($result)) {
          echo '<div class="review">';
          echo ' <i class="fas fa-quote-left"></i>'.$row['review'].' '.$row['user_uid'].' '.$row['datesubmitted'].'<i class="fas fa-quote-right"></i>';
          echo '<br></br>';
          echo '</div>';
      <!DOCTYPE html>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="style.css">
          <link href="|Mr+Dafoe" rel="stylesheet">
       <link rel="stylesheet" href="" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
         <link href="" rel="stylesheet">
         <link href="|Lobster" rel="stylesheet">
         <link href="|Lobster|Monoton|Orbitron" rel="stylesheet">
    <section class="main-container">
         <div class="crotchet">
    <div class="minim">
    <div class="quaver">
         <div class="pc101"> </div>
        <div class="music"><i class="fas fa-music fa-8x"></i></div></span>
        <div class="sharp"><p>&#9839</p></div>
        <div class="natural"><p>&#9838</p></div>
        <div class="flat"><p>&#9837</p></div>
        <div class="main-wrapper">
          <div class="title">
           <h1>Welcome to PianoCourse101</h1>
        <div class="main-wrapper">
          <div class="first">
           <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br></br> There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br></br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
        <div class="form">
        <form class="signup-form" action="newsletters.php" method="POST">
          <div class="newsletters">
           <label><center>Enter your E-mail Address</center></label>
           <div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center></div>
           <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
        <img class="snoopy" src="includes/pictures/snoopy.jpg"  alt="snoopy playing the piano" />
       <div class="services_main">Services</div>
          <div class="services">
             <div class="service1">
                <h1>Level 1</h1>
                <div class="image">
                <a href="signup.php"><p>&#127929</p></a>
                <h3>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</h3>
                <div class="service1">
                 <h1>Level 2</h1>
                <div class="image">
                <a href="signup.php"><p>&#127931</p></a>
               <h4>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</h4>
              <div class="service1">
                <h1>Level 3</h1>
                <div class="image">
                <a href="signup.php"><p>&#127927</p></a>
                <h5>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</h5>
    <span class="index_views"><p>There are <?php echo "<span class='index_views_counter'> $views </span>";?> visitors who have visited <?php echo "<span class='index_views_counter'> $pagename </span>"; ?>!</p></span>
         div.service1 {
      width: 800px;
      border: 1px solid #c1c1c1;
      margin: 20px 50px;
      padding: 0 5px;
      float: left;
    div.service1 > p {
       font-size: 14px;
       color: #000000;
       max-width: 250px;
       padding-top: 30px;
       text-align: justify;
       text-justify: inter-word;
    } {
      width: 2500px;
      margin: 0 auto;
    }  h1 {
      font-size: 50px;
      font-weight: bold;
      background-color: #c1c1c1;
      color: #000000;
      padding: 10px 0;
    div.image {
      max-width: 300px
      margin: 15px 0 0 0;
      padding-top: 30px;
    div.image h3 {
      position: relative;
      bottom: 300px;
    div.image h4 {
      position: relative;
      top: 200px;
    div.services_main {
      text-align: center;
      font-size: 40px;
      color: #6495ED;
      margin: 100px 0 50px 0;
      font-family: 'Aldrich', sans-serif;
       font-family: 'Mr Dafoe', cursive ;
    div.image:hover {
      opacity: 0.2;
      max-width: 200px;
      margin-top: 15px;
    Last edited by piano0011; Jul 29th, 2018 at 02:35 AM.


  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Cottage Grove, Minnesota
    Member #
    720 times
    I'll offer some good advice.

    First, I'm assuming this is your website?

    You should start over and use an existing HTML5 responsive template that you can purchase or download.

    Build your site from something that looks and renders properly on any device.

    It won't come with PHP scripts (unless it's a wordpress theme), but you can do the PHP stuff later.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 05:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: