Member Avatar for sujan.dasmahapa

i am creating a button on the page and pressing button loads an image. when the image loaded button is moving down and the image occupies the top-left portion. How can i position the image on the right hand side, so that my buttons dont move and the images comes on the right side at some specified loacation and size. Please help me resolving this. check the code snippet below.

<?php
if(isset($_POST['submit']))
{ 
$imagepath = "shirt7.jpg";
echo "<img src='$imagepath' />";
}
?>

<form method="post" action="">
<input type="submit" name="submit" value="Submit Form">
/form>
  • 4 Contributors
  • 9 Replies
  • 192 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by sujan.dasmahapa

Dani AI

Generated

Quick summary and practical next steps. Two separate causes were at play in this thread: the PHP quoting/variable-expansion issue that produced a broken src, and the page-layout choice that let the newly inserted image push the buttons down. Good points already raised by (CSS for placement) and (check the src). As found, the immediate PHP fix was to stop using a single-quoted literal that prevented the variable from expanding — a safer pattern is to build the tag cleanly and use CSS for placement.

A simple, robust way to build the tag in PHP without relying on string interpolation is concatenation:

echo '<img src="' . $imagepath . '" class="preview" alt="preview" />';

Using a class keeps presentation out of PHP and avoids brittle inline styles. Always include an alt attribute for accessibility and to make broken-image diagnostics clearer.

Two layout approaches that keep the buttons from moving:

  • Take the preview out of the document flow (absolute positioning) and reserve room for it so content doesn't shift.
  • Place the preview in a right-hand column (using a floated block, flexbox, or grid) so the main content never reflows into that area.

Example CSS (place in your stylesheet):

.preview {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 220px;
  height: auto;
}
.content {
  margin-right: 260px; /* reserve horizontal space equal to preview width + gap */
}

Troubleshooting checklist (short): open the image URL directly to confirm 200 OK; check filename case (Linux hosts are case-sensitive); verify path relative to document root or use an absolute URL; inspect the Network/Console in browser devtools for 404/403; confirm file permissions (typical 644) and correct MIME. Prefer divs with CSS (flex/grid) over tables for layout; keep styles in a stylesheet for easier maintenance.

Recommended Answers

All 9 Replies

Member Avatar for cereal

Basically you can add style="float:right;" to img tag. This thread is related more to CSS forum than PHP, I suggest you to move it, bye :)

Member Avatar for sujan.dasmahapa

is this correct. My image is not loading on right. A red cross(X) sign is coming.

<?php
if(isset($_POST['submit']))
{ 
$imagepath = "shirt7.jpg";
echo '<img src="$imagepath" style="float:right;"  />';
}
?>

<form method="post" action="">
<input type="submit" name="submit" value="Submit Form">
</form>
Member Avatar for karthik_ppts

use <table> or <div> to position your image...

Member Avatar for Member #120589

If a little red cross shows up it means the source (src) is wrong. Check the path and filename in the browser's 'view source'.

Edited by Member #120589 because: n/a
Member Avatar for cereal

is this correct. My image is not loading on right. A red cross(X) sign is coming.

$imagepath = "shirt7.jpg"; # check this!

Then check the path. Is your image in the same directory of your script file?


oops! Hi Ardav ;D

Edited by cereal because: n/a
Member Avatar for sujan.dasmahapa

its working now friend. i just had to put like this

<?php
if(isset($_POST['submit']))
{ 
$imagepath = "shirt7.jpg";
echo "<img style='float:right;' src='$imagepath' />";
}
?>

<form method="post" action="">
<input type="submit" name="submit" value="Submit Form">
</form>

Thanks a lot friend.

Member Avatar for cereal

Fine, mark the thread as solved, bye :)

Member Avatar for sujan.dasmahapa

Thanks a lot friend

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.