Having trouble lining up my images. [Archive]

Click to See Complete Forum and Search --> : Having trouble lining up my images.

stacywacy

07-16-2005, 03:54 PM

Hi, I'm having trouble lining up my images on a Website. I want them positioned under each other on the right side of the screen with a little bit of padding between them. But, what happens is that one pic will be positioned at the top on the right side, but the second pic will be below but further to the left, kind of indented, so to speak. Here's my code.

CSS

img.photo1 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 0;
border: 0;
}
img.photo2 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 6px;
border: 0;
}

<div id="banner">
<h1><img alt="banner (21K)" src="The.JPG" height="110" width="825" /></h1>
</div>


<a href = "pic 045.jpg">
<img class = "photo1" align = "right" src = "pic 045.jpg" alt = "pic 1" /></a>

<p><span style = "font-family: cursive;">blah</span> blah blah blah blah blah blah. blah blah blah blah blah
blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

Blah <span style = "font-family: cursive;">Blah</span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah, blah blah blah blah blah whatever I want; It will </p>


<a href = " pic 044.jpg">
<img class = "photo2" align = "right" src = "pic 044.jpg" alt = "pic 2" /></a>

<ol type = "1">
<li>Text.</li>
<li>text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
</ol>

Does anyone know what I'm doing wrong? I just want the two pictures to line up right under each other on the right side of the screen, but the second pic gets indented and ends up being side-by-side the 1st pic, but a few inches down from the page, not under the first pic.

ray326

07-17-2005, 12:51 AM

Have you tried float:right on the img style?

stacywacy

07-18-2005, 03:30 AM

Thanks, I tried that but it didn't work. I had it corrected in IE, but now it's not showing correctly there either. I'll just keep trying different things.

Wart_Hog

07-18-2005, 04:10 AM

Maybe...

<html>
<head>
<style type="text/css">
img.photo1 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 0;
border: 0;
}
img.photo2 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 6px;
border: 0;
}
</style>
</head>
<body>
<div id="banner">
<h1><img alt="banner (21K)" src="The.JPG" height="110" width="825" /></h1>
</div>


<div style="float:left;width:610px;">
<p><span style = "font-family: cursive;">blah</span> blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah
<span style = "font-family: cursive;">Blah</span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah, blah blah blah blah blah whatever I want; It will </p>

<ol type = "1"> <li>Text.</li> <li>text.</li> <li>Text.</li> <li>Text.</li> <li>Text.</li> <li>Text.</li> <li>Text.</li> <li>Text.</li> </ol>
</div>
<div style="width:200px;margin-left:625px">
<a href = "pic 045.jpg"><img class = "photo1" src = "pic 045.jpg" alt = "pic 1" /></a>

<a href = " pic 044.jpg"> <img class = "photo2" src = "pic 044.jpg" alt = "pic 2" /></a>
</div>
</body>
</html>

-Mike

stacywacy

07-18-2005, 11:04 PM

Thanks wart_hog, I hadn't thought about doing that. :)