Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning

Status
Not open for further replies.
Halcrow

Halcrow

Programmer
Aug 24, 2004
76
GB
I'm having trouble positioning an image within a div tag. I want the image to be at the bottom of the div. Here's my code, why doesn't it work?

Code:

div.frame {
width: 300px;
height: 300px;
border: 1px solid #000000;
text-align: center;
}

img.image {
position: inline;
vertical-align: bottom;
}

<body>
<div class="frame" >
<img class="image" src="images/breakers.jpg" />
</div>
</body>

Hope someone can help, this problem is really bugging me!
 
Sort by date Sort by votes
Sorry I didn't get chance to answer you in your other thread.

This seems to work for me. Suprisingly.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">

.myImg {
	display:inline;
}

</style>
</head>

<body>
	<div class="myImg">
		<img src="image1.jpg" alt=""/>
	</div>
		 
	<div class="myImg">
		<img src="image2.jpg" alt=""/>
	</div>

</body>
</html>

The divs seem to bottom align by default

 
Upvote 0 Downvote
thanks for the advice - I see what you mean, it does bottom align, but it's not what I'm trying to do. Maybe I'm approaching this problem from the wrong angle.

I have images that are either 200px wide or 200px high. I want to design my layout to display any image with these properties. Any one of my images can fit into a 200x200 box, so I've designated an area of that size on my page. If the image is a landscape (i.e. 200px wide) I want it to sit at the bottom of this region. If it's a portrait (i.e. 200px high) I want it to the left. I can position the portrait by using the "text-aling: left;" command. I tried to position the landscape using the "vertical-align" command, but nothing happened. Maybe I'm trying to use this command in the wrong context.

I could use absolute positioning, defining the number of pixels from the border etc, but the images have varying height so this would be tiresome and difficult to update.

Maybe this is an impossibility using CSS - I just thought that it would be an easy thing to do!

What do you think?
 
Upvote 0 Downvote
Can you give a link to the actual page?
I am having trouble seeing where the problem is, and I think we are thinking about it in different ways.

 
Upvote 0 Downvote
This is really annoying me.
hehe

I need to not think about it for a bit.
It seems really easy to do, but the obvious doesn't seem to work.

There is a gallery thing I am working on here

It's work in progress, but the layout is all CSS and works ok.
Not quite what you were after as the images don't align to the bottom.

 
Upvote 0 Downvote
Try this ...

Don't bother with the img.bottom class. Set your picture as a background image in the div.frame class, and diddle with it's positioning like so ....
Code: 
div.frame {
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    background-image: url(images/breakers.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
}
Then on your page ...
Code: 
<div class="frame">
</div>
Et voila!

Cheers,
Mike.

True wisdom is knowing when to RTFM.
 
Upvote 0 Downvote
Already suggested that in another thread on the same topic.

However, in this case the images need to be links.

To be honest since it isn't immediately straightforward I would either use a table, or design around the problem.

 
Upvote 0 Downvote
Foamcow,

Hmm. I hadn't seen the other thread.

What would happen if he put an anchor around the div?

Cheers,
Mike.

True wisdom is knowing when to RTFM.
 
Upvote 0 Downvote
position: absolute;
bottom: 0px;

that does it!
 
Upvote 0 Downvote
Hmm.
I was pretty sure I tried that and it didn't work.

Tested it again, and it doesn't. It positions the images at the bottom of the window rather than the containing DIV.
It's obviously working for you though! lol.
What browser are you testing in? I have tried both IE6 and Firebird so far.
Can you show me the actual code?

 
Upvote 0 Downvote
adding position: relative; to the parent (that is div) will position the image at the bottom of the div rather than screen. That however does not solve the problem of centering the image horizontally, since absolute positioning cancels out text-align property. At least for me.
 
Upvote 0 Downvote
Aha.. yes.. I just did that and came here to post.
lol

Strange though, I would have thought that the position attribute related to that div (i.e. the parent) and not it's content.
You live and learn!

 
Upvote 0 Downvote
yeah - I forgot to mention the position: relative; needed in the parent. I'm glad we got to the bottom of this, it was really bugging me!

Thnaks for your time and effort
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
160
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
193
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
215
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
145
c0deM0nK424
c0deM0nK424
Evil8
  • Locked
  • Question
CSS Positioning and IE 2
Replies
14
Views
178
Evil8
Evil8

Part and Inventory Search

Sponsor

Back
Top