Problème de block

bonjour à tous
j'ai un problème concernant ces sacrés css

#global
{
width: 100%;
border: 1px solid gray;
}

.produit
{
width: 60%;
height: 250px;
text-align: left;
border-left: #c00000 double 5px;
float: left;
margin: 3em 0 0 0;
border: 2px solid gray;
}

.contour
{
width: 100%;
background: #c00000;
color: #fff; 
font-family: Benguiat Frisky;
font-size: 15px; 
font-weight: bold;
}

.image
{
width: 200px;
height: 200px;
margin: 3px 0 0 5px;
float: left;
}



.sommaire
{
float: left;
margin-top: 35px;
color: #c00000;
font-weight: bold;
font-size: 1.3em;
font-family: 'Lucida Console', verdana, tahoma, arial;
border: 1px solid gray;
}

.acteurs
{
margin: 2em 0 0 1em;
width: 30%;
color: #c00000;
font-family: Maiandra GD;
font-size: 1.3em;
font-weight: bold;
float: left;
border: 1px solid gray;
}

.liste
{
font-size: 1em;
font-family: Maiandra GD;
list-style-type: none;
}

.histoire
{
margin: 2em 0 0 0 ;
padding: 1em 0 0 1em;
width: 60%;
text-align: left;
font-size: 1.3em;
border: 1px solid gray;
}

.histoire1  /* style pour là ou il y a la pub*/
{
float: left;
margin: 1.2em 0 0 0 ;
padding: 1em 0 0 1em;
width: 60%;
text-align: left;
font-size: 1.3em;
border: 1px solid gray;
}

.pub
{
float: left;
margin: 0 0 0 2em;
width: 120px;
height: 600px;
}

.surlign
{
text-decoration: underline ;
font-weight: bold;
}



<div id="global">

<div class="produit">

<table class="contour"><tr><td><a name="">mon premier film</a></td></tr></table>

<img src="" alt="" class="image" /> 
<ul class="sommaire"> <li>film </li><li>durée : 30 min</li> <li>couleurs</li></ul>

</div>
<div class="acteur"><strong class="surlign">acteurs</strong>
<ul class="liste"><li>...</li>
                  <li>....</li>
                  <li>....</li>       
                  <li>....</li>
                  
</ul>


</div>

<div class="histoire1">

<p class="surlign">histoire</p>

Je colle ici tout mon texte ....
 <br /> <br /> <br />            
                  

</div>

<div class="pub">
<!-- ici une banniere de pub  -->
</div>

<br /><br /> 

<div class="produit">

<table class="contour"><tr><td><a name="">deuxieme film</a></td></tr></table>

<img src="" alt="" class="image" /> 
<ul class="sommaire"> <li>film </li><li>duree: 15 min</li> <li>couleur</li></ul>

</div>
<div class="acteurs"><strong class="surlign">acteurs</strong>
<ul class="liste"><li>....</li>
                  <li>.....</li>
                  
</ul>


</div>


<div class="histoire">

<p class="surlign">histoire</p>

test test test<br />
up up uoiehio uizhuizhuierf reuize ruiguirg uiruiueri <br />
                  
                  

</div>

</div>
</body>
</html>

Mon problème est que jusqu'a la balise <div class="histoire"> tout se passe bien comme je le veux!
Mais lorsque j'ajoute la suite il se passe une chose que j'arrive a comprendre!
J'ai mis un border au bloc "histoire" pour voir les dimension visuelement!
Mais la bordure prend toute la page et non pas les dimensions que j'ai définie dans ce block là...

comment celà fait ce??

Si tu sais nous montrer une page, parce que je doutes que beaucoup de monde ait envie de se tapper 2 pages de codes

Salut,

Essaye au moins de mettre un code complet pour qu'il soit exploitable...

Bon, en ajoutant ce qui manque dans ton extrait j'obtiens une page avec certes une mise en page un peu...déroutante...mais pas de problème du côté de la bordure. Un exemple en ligne SVP, ou une capture d'écran. Et pense à préciser sur quel navigateur éventuellement.

oui biensur
pardon pour le retard mais je n'ai pas pu répondre avant!
voici donc des impressions d'écran de mon problème:

le haut de page :
(Edit par Raphael : évitez à tout prix d'afficher des images énormes qui déforment le forum ! Utilisez la case à cocher "créer une vignette", qui est faite pour ça)

le bas de page :
(Edit par Raphael : évitez à tout prix d'afficher des images énormes qui déforment le forum ! Utilisez la case à cocher "créer une vignette", qui est faite pour ça)


alors mon problème vient du fait que j'ai 2 partie qui se succèdent!
C'est la deuxième qui pose problème!
Comme vous pouverz le voir j'ai mis des border pour qu'on puisse voir les limites des blocks!
Le block dont les bordures sont marron ( <div class="histoire"> )
remontent jusqu'en haut de page comme vous pouvez le voir ... sur les 2 images!
C'est du a mon float: left, de ma partie pub!
si j'enleve ma pub et les propriété float: left; alors le problème disparait!

et puis si je met qu'une partie au lieu de 2, alors j'ai l'image suivant :
(Edit par Raphael : évitez à tout prix d'afficher des images énormes qui déforment le forum ! Utilisez la case à cocher "créer une vignette", qui est faite pour ça)

mon block div="global" qui englobe toute la page est reduit par la bordure jaune que vous pouvez voir tout en haut...
Pourquoi ce block n'englobe pas tout ?

Merci
Modifié par Raphael (07 Jul 2005 - 10:56)