Float an image

HTML & CSS
1

why is the floated image appearing so far down the page and not near the top?
http://fixmysite.us/gmpc/wordpress/?page_id=143

Thanks…

2

It’s because of the clear: both on those divs on the left. That’s not a good way to do a sidebar. Wrap those left boxes in one div and float the whole lot to the left. Wrap the rest of the content in a div and float it right. Much neater.

3

ok

4

/I placed everything on the left div and floated it to the left
http://fixmysite.us/gmpc/wordpress/?page_id=143
where is that small white space above “Events Calendar” coming from?

Thanks…

5

Two quick things to check would be the image above. Give it display:block; or vertical align:top; This is one of the problems with mixing inline elements with block elements. Essentially, the image is expecting text allowing that small space for the descenders part of characters in said text.

You should also check you don’t have margin-top in the H2 of the events calendar.

6

Yes, what D_P said. Images by default leave space below them and align their bottom with the baseline of any text that might sit beside them Either of display: block; or vertical-align: bottom; will fix it, but it should be display: block; because you want it to display as a block. (Personally, I never leave an inline element next to a block element, even though it’s allowed.)