/    Sign up×
Community /Pin to ProfileBookmark

lining up images on top of each other

Copy linkTweet thisAlerts:
Oct 27.2005

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=”WebGIFs/practitioners/headshots/np.gif”>
<img class=”left” src=”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?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@tegraphixOct 27.2005 — You could put both images in a div and use a break <br /> to move the second image below the first.
Copy linkTweet thisAlerts:
@jerseydubsauthorOct 27.2005 — 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.
Copy linkTweet thisAlerts:
@SiddanOct 27.2005 — 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 :p

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:block
Copy linkTweet thisAlerts:
@tegraphixOct 27.2005 — This 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.
[code=html]<!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="WebGIFs/practitioners/headshots/np.gif"><br />
<img class="left" src="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>
[/code]
×

Success!

Help @jerseydubs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...