floating trouble

[Mzungu]

I have made this very simple design consisting of three elements inside a div of fixed size centered horisontally and vertically.

Check it out (http://maarup.net/test/ppk) and explain to me why the two rightmost elements are separated like they are. Obviously I want them to stick together.

Thanks
Mz

[Roy Sinclair]

That's probably caused by the blank line between the top div and the content div.

[adios]

More or less...it's actually the white space between the <div> tags and the <img> tags, just like in a table when you break cell markup over two lines.

Why not just do:

#nav{
width:192px;
height:420px;
float:left;
background-image:url(leftbackground.jpg);
}
#title{
width:568px;
height:93px;
float:left;
margin:0;
padding:0;
background-image:url(title.jpg);
}

[Mzungu]

Thanks

Just to understand this properly, the white space was a regular linebreak caused by the img being the same width as the parent div AND being preceded by a space?

Mz

[me']

I think it's caused by the linebreak between the <img> tag and the </div> tag, counted as a space which takes place on a new line.