3 replies [Last post]
vandozza
Offline
newbie
Last seen: 12 years 14 weeks ago
Joined: 2007-08-27
Posts: 6
Points: 0

Hi,

Trying to float and border a few images using css. some images are floated right, and some left, amongst some paragraphs.

the code im using is basically this -

HTML -

(or "picleft")
image alt text

CSS-

.picright {
float:right;
border:0.3em #3F341D solid;
margin:1em 0em 1em 2em;
clear:left;
}

.picleft {
float:left;
border:0.3em #3F341D solid;
margin:1em 2em 1em 2.3em;
clear:right;
}

The issue that I am having is there is a gap between the bottom of the image and the border.
I have searched for a solution with no progress.

My website can be viewed here - http://www.batemansbayosteopathy.com.au/staff.php
to see the issue in question.

How do I get rid of the space at the bottom of the images?

Thanks,
Lee

Triumph (not verified)
Anonymous's picture
Guru

vandozza wrote:

vandozza wrote:

HTML -

(or "picleft")
image alt text



First, instead of that, why not just do

image alt text

Is there really a need for that extra div?
That should take care of the issue.

The reason it is happening is because <img> is an inline element and therefore it makes room for descenders. In other words it is vertical-align: baseline. So, you could also fix your issue (although less desirable) by placing this in your CSS:
img {vertical-align:bottom;}

or this:
img {display:block;}

vandozza
Offline
newbie
Last seen: 12 years 14 weeks ago
Joined: 2007-08-27
Posts: 6
Points: 0

Thanks Triumph That

Thanks Triumph

That completely solved the issue, I actually didn't realise that I could place the class="x" within the image tag.

I have been having difficulty with this for 2 days, and its such a simple fix!

Thanks again!

Triumph (not verified)
Anonymous's picture
Guru

Glad to help. A good

Glad to help. :thumbsup:

A good rule of thumb when using CSS is "entities should not be multiplied beyond necessity".

In mathematics you should always simplify your fractions and in web design you should always simplify your markup and layout. Rid your pages of unnecessary DIVs and make use of semantic tags where possible.