i have placed two images in my html that i would like to have appear one above the other and floated to the left of the text. i have the following css/html
css . . . .
body
{
background-image: "WebGIFs/caduceus.gif";
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 85% 125px;
font-family: Arial;
color: #000;
margin: 0;
padding: 15px;
}
h1
{
float: right;
width: 500px;
font-family: Times;
font-size: 225%
}
p.sub
{
float: right;
width: 500px;
font-size: 125%;
color: #933;
}
img.left
{
float: left;
}
p
{
float: right;
width: 500px;
}
p.bio
{
color: #933;
}
......
html . . . .
<body>
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"WebGIFs/practitioners/headshots/np.gif">
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"jpg/BRAINsm.jpg">
<h1>Nalini Prasad, M.D.</h1>
<p class="sub">Board Certified Neurologist & Neurophysiologist</p>
...
yet they display side by side. i'm confused. doesn't html want to put each element underneath the previous element?You could put both images in a div and use a break <br /> to move the second image below the first.that does not work. i tried it and it just bumps the second image down one line. but it is still to the right of the first image. in other words, it only drops the second image down about 10px.no, you have made the images to float left to eachother, so they will be next to eachother since they both are floated. It only requires the first image to be floated left and they will line up next to eachother...
heck, the img is an inline object so they will line up next to eachother with pure html code
if you want more than one image to be floated left then wrap them instead inside of a new div and make that div float left. Then images could be set as display:blockThis is what i was getting at. You have a container div that holds the image div and the text div. You float the images to the left, text to the right. You can make the divs any width/height you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
background-image: "WebGIFs/caduceus.gif";
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 85% 125px;
font-family: Arial;
color: #000;
margin: 0;
padding: 15px;
}
h1
{
font-family: Times;
font-size: 225%;
}
p.sub
{
font-size: 125%;
color: #933;
}
/* DIVS */
#images {
float: left;
}
#text {
float: right;
width: 500px;
}
</style>
</head>
<body>
<div id="container">
<div id="images">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"WebGIFs/practitioners/headshots/np.gif"><br />
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"jpg/BRAINsm.jpg">
</div>
<div id="text">
<h1>Nalini Prasad, M.D.</h1>
<p class="sub">Board Certified Neurologist & Neurophysiologist</p>
</div>
</div>
</body>
</html>
css . . . .
body
{
background-image: "WebGIFs/caduceus.gif";
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 85% 125px;
font-family: Arial;
color: #000;
margin: 0;
padding: 15px;
}
h1
{
float: right;
width: 500px;
font-family: Times;
font-size: 225%
}
p.sub
{
float: right;
width: 500px;
font-size: 125%;
color: #933;
}
img.left
{
float: left;
}
p
{
float: right;
width: 500px;
}
p.bio
{
color: #933;
}
......
html . . . .
<body>
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"WebGIFs/practitioners/headshots/np.gif">
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"jpg/BRAINsm.jpg">
<h1>Nalini Prasad, M.D.</h1>
<p class="sub">Board Certified Neurologist & Neurophysiologist</p>
...
yet they display side by side. i'm confused. doesn't html want to put each element underneath the previous element?You could put both images in a div and use a break <br /> to move the second image below the first.that does not work. i tried it and it just bumps the second image down one line. but it is still to the right of the first image. in other words, it only drops the second image down about 10px.no, you have made the images to float left to eachother, so they will be next to eachother since they both are floated. It only requires the first image to be floated left and they will line up next to eachother...
heck, the img is an inline object so they will line up next to eachother with pure html code
if you want more than one image to be floated left then wrap them instead inside of a new div and make that div float left. Then images could be set as display:blockThis is what i was getting at. You have a container div that holds the image div and the text div. You float the images to the left, text to the right. You can make the divs any width/height you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
background-image: "WebGIFs/caduceus.gif";
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 85% 125px;
font-family: Arial;
color: #000;
margin: 0;
padding: 15px;
}
h1
{
font-family: Times;
font-size: 225%;
}
p.sub
{
font-size: 125%;
color: #933;
}
/* DIVS */
#images {
float: left;
}
#text {
float: right;
width: 500px;
}
</style>
</head>
<body>
<div id="container">
<div id="images">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"WebGIFs/practitioners/headshots/np.gif"><br />
<img class="left" src=http://www.webdeveloper.com/forum/archive/index.php/"jpg/BRAINsm.jpg">
</div>
<div id="text">
<h1>Nalini Prasad, M.D.</h1>
<p class="sub">Board Certified Neurologist & Neurophysiologist</p>
</div>
</div>
</body>
</html>