HTML Image Alignment

RigasMinho · Oct 23, 2006

Hello,
I have this issue where somehow i want the first image to be placed all
the way on the left part of the screen.

While the 2nd image has to be placed a little bit to the right side of
the left margin.

I cant seem to get it to work:
<body style="margin-left:50;margin-right=50" >
<img src="test.GIF" />
<img src="test2.jpg" />

If i change teh body style to "margin-left:0;
then it aligns both pictures to the left.

I only want the first picture aligned to the left but cant get the
second picture to align someplace else.

Any ideas?

Jonathan N. Little · Oct 23, 2006

RigasMinho said:
Hello,
I have this issue where somehow i want the first image to be placed all
the way on the left part of the screen.

While the 2nd image has to be placed a little bit to the right side of
the left margin.

I cant seem to get it to work:
<body style="margin-left:50;margin-right=50" >

#1 50 what? With CSS you must specify the *units* for most lengths, 50px
a assume?

<img src="test.GIF" />
<img src="test2.jpg" />

#2 images are inline not block element by default so by your markup
test2.jpg would follow to the right of test.GIF

If i change teh body style to "margin-left:0;
then it aligns both pictures to the left.

I only want the first picture aligned to the left but cant get the
second picture to align someplace else.

Yes, give it a different style, In HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/stylesheet">
BODY { margin: 0 50px; }
.hugLeft { margin-left: -50px; }
.offsetLeft { margin-left: 20px; }
</style>
</head>
<body>
<div class="hugLeft">
<img src="text.GIF" alt="test1">
Should hug the left side of window
</div>
<div class="hugLeft">
<img src="text2.jpg" alt="test2">
Should be 70px offset from side of window
</div>
<p>
Standard 50px margin for page....
</p>
</body>
</html>

dorayme · Oct 23, 2006

"RigasMinho said:
Hello,
I have this issue where somehow i want the first image to be placed all
the way on the left part of the screen.

While the 2nd image has to be placed a little bit to the right side of
the left margin.

I cant seem to get it to work:
<body style="margin-left:50;margin-right=50" >
<img src="test.GIF" />
<img src="test2.jpg" />

If i change teh body style to "margin-left:0;
then it aligns both pictures to the left.

I only want the first picture aligned to the left but cant get the
second picture to align someplace else.

Any ideas?

Is this no good?

<div>
<img src="unknown.gif" alt="test1">
Should hug the left side of window
</div>
<div style="margin-left:70px;">
<img src="unknown.gif" alt="test2">
Should be 70px offset from side of window
</div>

RigasMinho · Oct 25, 2006

Dorayme - your solution works thanks.

I actually figured it out before your post but i appreciate your help.

Stuck with html and css	25	Dec 14, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
HTML Aligning social media icons	2	Dec 6, 2020
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

HTML Image Alignment

RigasMinho

Jonathan N. Little

dorayme

RigasMinho

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads