Adding the div cause the creation of a new line

Question

Hello everyone and happy Friday night,

I would like to have the following sentence in the same line and not in two lines:

echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p><br>";

The problem is that by applying the css div class='feedback-search' it creates a new line and put the text below. How can I make everything in one line?

Below you find the entire code of my page:

Thank you so much in advance

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>
    .navmenu {
    background-color: #FFFFFF;
    }

    .navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    }

    .navmenu li:last-child {
    margin-left: auto;
    }

    .navmenu ul li a {
    text-decoration: none;
    margin: 4px;
    padding: 5px 20px 5px 20px;
    color: #FFFFFF;
    background: #4285F4;
    display: inline-block;
    }

    .main-content {
    padding: 5px 20px 5px 20px;
    }

    .feedback-search {
    font-size: 13px;
    }

    .title {
    font-size: 20px;
    }

    .title a {
    text-decoration: none;
    }

    .title a:hover {
    text-decoration: underline;
    }   

    .tags {
    color: #006621;
    }
  </style>

</head>

<body>
    <div class="navmenu">
        <ul id=menu>
            <li><a href="http://www.clihelp.org/Clihelp%20V2/index.php">Clihelp</a></li>
            <li><a href="https://github.com/clihelp/dev_clihelp">GitHub</a></li>
            <li><form action='q.php' method='GET'>
                <input type='text' size='25' name='search'>
                <input type='submit' name='submit' value='Search' >
                    </form></li>
        </ul>
    </div>


    <div class="main-content">
    <?php

        $button = $_GET ['submit'];
        $search = $_GET ['search'];

        if (!$button)
            echo "you didn't submit a keyword";
        else {
            if (strlen($search) <= 1)
            echo "Search term too short";
            else {
            echo "<p>Your search - <b>$search</b> ";

            mysql_connect("localhost", "username", "password");
            mysql_select_db("dbname");

            $search_exploded = explode(" ", $search);

            foreach ($search_exploded as $search_each) {

                $x++;

                if ($x == 1)

                $construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
                else
                $construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";

            }

            $construct = "SELECT * FROM cliCommand WHERE $construct";
            $run = mysql_query($construct);

            $foundnum = mysql_num_rows($run);

            if ($foundnum == 0)
                echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
            else {
                echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p>";

                while ($runrows = mysql_fetch_assoc($run)) {
                $cliCommandId = $runrows ['cliCommandId'];
                $code = $runrows ['code'];
                $os = $runrows ['os'];
                $title = $runrows ['title'];
                $tags = $runrows ['tags'];
                $script = $runrows ['script'];

                echo "
        <div class='title'><a href=''>$title</a></div>
        <div class='tags'>$tags</div>
        $script<br>
        <p>
        ";
                }
            }
            }
        }
    ?>
    </div>
</body>
</html>

Hello, you should edit your question to make it a [MCVE](https://stackoverflow.com/help/mcve). It will help you get an answer faster. — xrisk, Nov 26 '16 at 05:48

score 2 · Accepted Answer · edited May 23 '17 at 12:24

Change the div to span:


echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><p><br>";
                                   ^                                                                                ^
//Notice the span instead of div --| (here) ------------------------------------------------------------------------| (and here)

The reason that this happens:

The reason why this splits onto two lines is that a <div> is a block level element by default which means that its display value is block.

Block level elements by default expand to fit the width of their container, which in your case is the width of the line. This pushes the following content down to the next line.

A <span> element is an inline element, which by default expands in width to fit its contents.

See this post for a visual explanation on the difference between inline, block and inline-block elements.

Adding the div cause the creation of a new line

1 Answers1