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=http://www.webdeveloper.com/forum/archive/index.php/"The.JPG" height="110" width="825" /></h1>
</div>
<!-- pic 1 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"pic 045.jpg">
<img class = "photo1" align = "right" src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"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>
<!-- pic 2 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->" pic 044.jpg">
<img class = "photo2" align = "right" src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"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.Have you tried float:right on the img style?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.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=http://www.webdeveloper.com/forum/archive/index.php/"The.JPG" height="110" width="825" /></h1>
</div>
<!-- pic 1 -->
<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 = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"pic 045.jpg"><img class = "photo1" src = "pic 045.jpg" alt = "pic 1" /></a>
<!-- pic 2 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->" pic 044.jpg"> <img class = "photo2" src = "pic 044.jpg" alt = "pic 2" /></a>
</div>
</body>
</html>
-MikeThanks wart_hog, I hadn't thought about doing that.
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=http://www.webdeveloper.com/forum/archive/index.php/"The.JPG" height="110" width="825" /></h1>
</div>
<!-- pic 1 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"pic 045.jpg">
<img class = "photo1" align = "right" src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"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>
<!-- pic 2 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->" pic 044.jpg">
<img class = "photo2" align = "right" src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"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.Have you tried float:right on the img style?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.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=http://www.webdeveloper.com/forum/archive/index.php/"The.JPG" height="110" width="825" /></h1>
</div>
<!-- pic 1 -->
<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 = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"pic 045.jpg"><img class = "photo1" src = "pic 045.jpg" alt = "pic 1" /></a>
<!-- pic 2 -->
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->" pic 044.jpg"> <img class = "photo2" src = "pic 044.jpg" alt = "pic 2" /></a>
</div>
</body>
</html>
-MikeThanks wart_hog, I hadn't thought about doing that.