Table and floating div

[Stoemp]

Hi

I'm experiencing a problem with positioning a table. It's easier to understand if I show an image explaining the problem. Here it is:
Table issue image

The code I use to make this page is:

<div class="pTekstKleinCentered" style="width: 150px; border: solid 1px black; float: right; margin-left: 10px;">
	<img src="../maps/simulfluorKit.jpg" alt="Simulfluor kit from Chemicon" />
	<br />Simulfluor kit de Chemicon
	<br /><br />
	<img src="../maps/simulfluorCMVAdeno.jpg" alt="CMV / Adeno" />
	<br />Cells infected with both CMV and adenovirus stained with SimulFluor&reg; CMV / Adeno reagent
	<br /><br />
	<img src="../maps/simulfluorHSVVZV.jpg" alt="HSV / VZV" />
	<br />Cells infected with HSV 1, 2 and VZV stained with SimulFluor&reg; Reagent<br /><br />
	<img src="../maps/simulfluorFluAFluB.jpg" alt="Fluo FluA / FluB" /><br />Cells infected with both Flu A and Flu B stained with SimulFluor&reg; Flu A/Flu B
</div>
<div class="pBodyTekst">Procédé unique d’utilisation de 2 fluorochromes pour la détection de minimum 2 agents viraux à partir d’un prélèvement direct et/ou d’une culture.
<br /><br />
Méthode facile, conforme au normes européennes (CE), au coût par coût et rapide. Après fixation à l’acétone de l’échantillon sur une lame, la procédure se déroule en une incubation unique de 15’.<br />
Dans chaque kit vous trouverez également des lames de contrôle.</div>
<table style="width: 230px; border: solid 1px black;" cellspacing="0" cellpadding="0">
<tr>
	<th class="pBodyTekst" style="background-color: #ABABAB; width: 160px; border-bottom: solid 1px black;">Description</th>
	<th style="background-color: #ABABAB; width: 50px; border-bottom: solid 1px black;">Cat. #</th>
	<th style="background-color: #ABABAB; width: 20px; border-bottom: solid 1px black;">CE</th>
</tr>
</table>

The first div block contains the images and floats to the right. I want the table to come right after the text.

How can this be done?

Thanks a lot

Steven

 

[Foamcow]

Is there a marigin and/or padding on the floated div or table that might be causing the combined width of the table and div to be more than the div they are contained in?

I can't see your stylesheet and so can't determine how your class "pTekstKleinCentered" is defined.

try making a really narrow table, just to test the theory.

http://www.foamcow.com

 

[ChrisHunt]

The code you've posted works fine as-is, in IE6 anyway. Judging by your screenshot, there's some CSS being applied to limit the width of the page, and this width is not enough to hold the table and the floating panel (including its border & margin) side-by-side.

Either make the page a bit wider or the table a bit narrower.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Stoemp]

Narrowing the table did work indeed. Very strange because I have a total of 390px to divide. The floating block is 150px with a margin-left of 10px. The table was 230px, so this should have worked. Now I changed the width of the table to 220px and the position is fine now.

Thanks a lot, guys.

Steven

 

[Foamcow]

The table looks like it has a border, that counts too.

Read up on the CSS Box Model and the way in which different browsers calculate element widths.

Some include the border, padding and margin in the width, others don't.

http://www.foamcow.com

 

[BillyRayPreachersSon]

And some behave differently when a (valid) DOCTYPE is added / removed.

Dan

 

[Foamcow]

...or the XML prologue

http://www.foamcow.com

 

[Stoemp]

Ok, thanks guys. I'll look into it as soon as I return from my holiday.

Regards

Steven

 

[ChrisHunt]

Very strange because I have a total of 390px to divide.

Not strange at all:

Floating box: 150px width + (1px border x 2) + 10px margin = 162px

Table: 230px width + (1px border x 2) = 232px

That's a total of 394px to squeeze into 390px of width, so that's why it doesn't fit.

The [tt]width[/tt] of an element is only the width of the content part. It doesn't include margins, borders or padding (at least it shouldn't, see below). You have to take the width of these properties into account (multiplying by two if they apply to both sides of the element).

Although, according to the spec, [tt]padding[/tt] should not be included in the [tt]width[/tt] of an element. That may seem weird to you, but that's what it says. It certainly seemed weird to the people that wrote IE, so they did it differently - IE 5.x includes [tt]padding[/tt] in the width, so does IE6 unless you push it into "standards compliance" mode (sic) by including a full DOCTYPE. You need to work round this problem with the box model if you want your pages to look similar in all browsers - there's a famous fix for it here.

Have a good holiday!


-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Foamcow]

It's weird until you think about it like this:

Imagine you had a container that was made of a very thick material. If someone asked you to tell them the maximum size of object they could put in the container then you would measure the INSIDE of the container, not the outside.

Now, if you needed to know how many of these containers you could fit into the back of a truck, you would measure the OUTSIDE of the container. i.e. The size of the inside plus the thickness of it's walls, plus any space that was needed around it.

Hmm... now I write it down perhaps it is STILL weird.

http://www.foamcow.com