CODEWITHSUNDEEP
htmlcss
Alex Desruisseau
Alex Desruisseau

Reputation: 92

Button next to my entry always shows below the entry

I have a blog I am building with entries. I have a form with hidden variables to submit the entryID and other data to "delete" the post. The button always shows below the entry, instead of beside it.

I have tried using CSS Clear, and putting everything in a single <p> line to see if that helps. I feel like the issue is that there is a form with hidden variables, but I'm not sure how to fix this.

 <div id="subformposts">
    <?php echo $subentry['Body']; ?>
    <?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />

<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo $subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">     
        <input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
        <input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
        <?php if ($userid == 1 || $userid == $res['UserID']) { ?>
        <input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
    <?php } ?>
</form>
</div>

I want to see the button floating to the right of my entry, (or to the left at this point.) If I could have it tucked into the div that would be great.

Upvotes: 0

Views: 34

Answers (1)

Fokrule
Fokrule

Reputation: 854

You can use display: inline-flex on subformposts.

Like this one : 

<div id="subformposts" style="display: inline-flex;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />

<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo 
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">     
    <input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
    <input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
    <?php if ($userid == 1 || $userid == $res['UserID']) { ?>
    <input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>

Or you can keep both in two different div and put display:inline-block on both of those div. Like this . 

 <div id="subformposts" style="display: inline-block;">
 <?php echo $subentry['Body']; ?>
 <?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
</div>
<div style="display: inline-block;">
<!-- Determine whether to show the delete button -->
 <form action="Delete_entry.php" method="post" id="Deletesub<?php echo 
 $subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">     
<input type="hidden" readonly="true" name="EntryID" value="<?php echo 
$subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo 
$subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>

Upvotes: 2

Related Questions