Border bottom shows in wrong place

Get Started
1

Hey,

Can anyone see why the bottom border shows in the middle of the image…

http://kidsunlimited.co.uk/nursery.aspx?ID=31&Month=July%202010#fragment-11

I need it to appear just after the image…

Problem is that it is controlled via TinyMCE so a lot of it is invalid HTML i think…

Can anyone help?

Thanks

2

always use css to clear=both. this habit will help you a lot in adopting of html 5

3

AFAIK no, but it would seem it’s frowned upon (as it defines layout, not structure).
clear: both using CSS is better as I understand it.

4

Ah yes the famous <br clear=“all”/> worked! :wink:

Thanks ScallioXTX.

5

Isn’t <br clear="all"> deprecated?

6

The image is floating (it has float: right;) so it isn’t calculated in the height of the containing div.
You should either add a div or span with clear:both at the end of the containing div or add a <br clear=“all” /> at the end of the containing div.

7

i know but i don’t understand why it appears in the middle of the image, the border bottom should appear after the image?

Or am i doing something wrong?

8

It’s in the HTML:

<div style="margin-bottom: 15px; border-bottom: 1px solid rgb(192, 192, 192);">

Note: I copy/pasted this from FireBug, the HTML itself probably doesn’t say rgb(192, 192, 192) but some hexadecimal value. FireBug tends to rewrite those to rgb. Dunno why.