how to take off undesirable line breaks after PHP code in HTML

Question

So I have this blog I'm building, and the part where is troubling me is in the post div. It seems every element there is getting line breaks automatically. Even if I float them or anything, its just not working for me. It keeps separating the divs without me doing this, even if I set the padding to 0.

So here is the body of the index

<body>

<div id="universe">




<h1>Chris's Blog</h1>


    <div id="content">

        <div id="menu">
        <?php 
            $temp = $_SESSION['username'];
            $real = get_full_name($temp);
            if(isset($_SESSION['username']))
            {
                echo '<br />'.'Welcome back, '. $real['name'] . ' ' . $real['last_name'] . '.';
            }
    ?>
    </div>
    <div id="subcontent">

        <div id="posts">


 <?php

foreach( $posts as $post)
{
    if( ! category_exists('name', $post['name']))
    {
        $post['name'] = 'Uncategorized';
}
?>

<div class="post">
    <div id="post_title">
        <h2><a href="index.php?id=<?php echo $post['post_id']; ?>"><?php echo $post['title']; ?></a></h2>
            <p>Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?> in <a href="category.php?id=<?php echo $post['category_id']; ?>"><?php echo $post['name']; ?></a>
                </p>

    </div>


    <div id="post_content">

<?php echo nl2br($post['contents']); ?></div>

<?php // check if session has been set
if(isset($_SESSION['username']))
{
        ?><div id="post_edit">
        <p><a href="delete_post.php?id=<?php echo $post['post_id']; ?>">Delete post</a></p>
    </div>
        <?php
    }
        ?>
</div>
<?php
}

?>
        </div>

        <div id="rightbar">
        <ul>
            <li><a href="index.php">Home</a></li>
            <?php 
                if( isset($_SESSION['username']))
                {
                    echo '<li><a href="add_post.php">Add Post</a></li>',
                        '<li><a href="add_category.php">Add Category</a></li>',
                        '<li><a href="logout.php">Logout</a></li>';
                }

                ?>
            <li><a href="index.php">Contact</a></li>
            <?php
            if(! isset($_SESSION['username']))
            {
                echo '<li><a href="login.php">Login</a></li>';
            }
            ?>
        </ul>
        </div>

    </div>

</div>

The div I'm talking about is the div class="post", inside it has the "post_title", the "post_content", and the "post_edit" divs. Here is their css:

#post_title
{
    float:left;
    font-size:12px;
    width:580px;
}
#post_content
{
    float:left;
    width:580px;
}

maybe you forgot some css file around? Did you try on jsfiddle? Or maybe post an example with the HTML code in jsfiddle and not PHP, you css is not OK also, for ID's use #, for class use . (eg: #post_title { ... } — Mihai Iorga
– Mihai Iorga, Commented Jun 12, 2012 at 11:57
For one, "post_title" and "post_content" in the CSS should be "#post_title" and "#post_content" — John Kurlak
– John Kurlak, Commented Jun 12, 2012 at 11:59
yes im sorry, i took them out because for some reason stackoverflow wouldnt take it as code? I'll try edit them in again. — nullwriter
– nullwriter, Commented Jun 12, 2012 at 12:02

codingbiz · Accepted Answer · 2012-06-12 12:55:45Z

0

in your post content div, you are using

<div id="post_content">;
    <?php echo nl2br($post['contents']); ?>;
</div>;

now, that is going to convert all the $post['contents'] \n and \r to be <br /> causing your unwanted line breaks, so perhaps just echoing the $post['contents'] without the nl2br function will give you the solution you require?

failing that, do

#post_content br{
    display:none;
}

to hide all the br's inside the #post_content :)

edited Jun 12, 2012 at 12:55

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

answered Jun 12, 2012 at 12:15

Jamie

1896 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clowerweb · Accepted Answer · 2012-06-12 12:18:34Z

Assuming you might be showing multiple posts on the page (given the foreach loop above the post div), your post_title and post_content divs should be classes, as ids are unique element identifiers. That said, try this (after changing the ids to classes):

div.post .post_title {
    float:left;
    font-size:12px;
    width:580px;
}

    div.post .post_title h2 {
        margin: 0;
        padding: 0
    }

div.post .post_content {
    float:left;
    width:580px;
}

    div.post .post_content p {
        margin: 0;
        padding: 0;
    }

div.post .post_edit p {
    margin: 0;
    padding: 0;
}

Alternatively, you could try:

div.post * {
    margin: 0;
    padding: 0;
}

Or try using a CSS reset, such as from Twitter Bootstrap:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------

audio:not([controls]) {
    display: none;
}

// Base settings
// -------------------------

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
  .tab-focus();
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------

img {
  max-width: 100%; // Make images inherently responsive
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

// Prevent max-width from affecting Google Maps
#map_canvas img {
  max-width: none;
}

// Forms
// -------------------------

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible; // Inner spacing ie IE6/7
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clickable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
  overflow: auto; // Remove vertical scrollbar in IE6-9
  vertical-align: top; // Readability and alignment cross-browser
}

Using any of the above methods, you can then set your margins and padding as desired.

Collectives™ on Stack Overflow

how to take off undesirable line breaks after PHP code in HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related