image not aligned with its div

[Violet_82]

Hi there, I am having a - I believe - peculiar and annoying problem. I have a div on my home page which is meant to contain a picture. Now when I insert the picture I don't seem to be able to align it to the div, it's a little shifted, here's the link to it http://antobbo.webspace.virginmedia.com/petras/test/home.htm
Now, I must admit I am a bit puzzled as to why this is happening. All I have is a div and a picture in it. You will noticed I added this style to the picture style = "vertical-align:bottom;" because while I was trying to understand why the picture doesn't fit in the div I came across this thread http://www.webmasterworld.com/forum83/5683.htm and I thought I would have given it a go. No joy unfortunately.
The containing div style is this:

.main_picture
	{	
                top:60px;
		position:relative;
		width:700px;
		height:450px;
		border:5px solid white;
		margin: 0 auto;
	}

the html is here:

<div class = "main_picture">
<img src = "images/homepage/home_1.jpg" alt = "" style = "vertical-align:bottom;">
</div><!--END OF main_picture -->

Now, does anybody have an idea why this is happening? I am very much interested in the reason really! it is really annoying because I don't have the foggest!
Any help appreciated as usual
thanks

[Violet_82]

Sorry to post again, but by investigating a bit more I have realized that the picture is shifted exactly 19px down. So, if I add this

.main_picture img
{
margin:-19px 0 0 0;
}

it actually works. However I feel that this is a somewhat lame attempt to fix, because I don't know whether this will work on a mobile device and in IE6 - can't test these at the moment - and also because I don't understand why the picture is shifted 19px in the first place.

[floatingDivs]

Hi Violet_82 (again),

I think I've given you the lecture on clearing floats about 100x. :P

Remove the margin from the .main_picture img (or set it to margin: 0; as below)

Then, set a clear on the .main_picture div.

That ought to fix it.

.main_picture { clear: both; }
.main_picture { margin: 0; }

[lps]

Sorry to interrupt in this topic but i wonder why using a wrapping div to create a border as it can be done just by css:
img{
padding:5px;
background-color:white;
}

[Violet_82]

Hi floatingDivs,
yes you're quite right you've enlightened me about it already many times, but it didn't occur to me that this time it had anything to do with it. In this case the elements floated are just the navigation .navigation and the nav bar .nav_bar and straight after them I have added a div clearing the floats. The picture container .main_picture is not floated, so I thought to myself that there was no float to clear, that's why it didn't occur to me to do that. And I am still puzzled as to why in this case clearing the floats is necessary. If you look at the html the floats have been cleared already, that's why I got confused I believe:

<div class = "navigation">
			<ul>
							<li><a href = "#">Home</a></li>
							<li><a href = "#">Travels</a></li>
							<li><a href = "#">Portfolio</a></li>
			</ul>

		</div><!--END OF navigation-->
		<div class = "clear">
		</div><!--END OF clear -->

		<div class = "nav_bar">
			<img src = "images/bar.jpg" alt = "">
		</div><!--END OF nav_bar-->

		<div class = "main_picture">
			<img src = "images/homepage/home_1.jpg" alt = "">
		</div><!--END OF main_picture -->

@lps: yes, good point, I didn't think of it!

[floatingDivs]

OK Violet82,

You wanted to get rid of the negative margin, right? The way to do it was with my suggestion.

Below all your previous CSS, add the following two styles.

.main_picture { clear: both; }
.main_picture img { margin: 0; }

----------

HERE'S A DETAILED EXPLANATION

<div class = "navigation">
			<ul>
							<li><a href = "#">Home</a></li>
							<li><a href = "#">Travels</a></li>
							<li><a href = "#">Portfolio</a></li>
			</ul>

		</div><!--END OF navigation-->
		<div class = "clear">
		</div><!--END OF clear -->

		<div class = "nav_bar">
			<img src = "images/bar.jpg" alt = "">
		</div><!--END OF nav_bar--> <-------------------------***NEEDS TO BE CLEARED AS  ITS FLOATED TO THE RIGHT

		<div class = "main_picture"><------------------------------***DOES THE CLEARING
			<img src = "images/homepage/home_1.jpg" alt = ""><--------------***SINCE THE .main_picture DIV CLEARS THE .nav_bar DIV, NO NEED TO USE NEGATIVE MARGIN
		</div><!--END OF main_picture -->

[Violet_82]

Hi floatingDivs thanks for the detailed explanation, much clearer now. I will have a better look next time before I post, in case I forget to clear the float
thanks a lot
regards