Absolute Div étant écrêté avec la marge négative

Question

EDIT: J'ai modifié mon code et je sais avoir l'effet désiré dans le coin supérieur gauche, mais maintenant mon conteneur de contenu ne s'étend pas automatiquement tout le long (a le noir J'ai essayé d'ajouter une étiquette planant au-dessus d'une div mais elle semble être coupée et j'ai essayé pendant quelques heures de la faire fonctionner sans succès. relatif, et l'enfant est absolu, mais à chaque fois que je place le conteneur enfant à débordement: auto, il se clippé. Voici le js violon pour que vous puissiez voir de quoi je parle (TEST123 dans le coin supérieur gauche) Fiddle. besoin du contenu dans le conteneur de droite à autogrow le div parent. J'essaie d'avoir le corener en haut à gauche où il est dit que TEST123 apparaît comme l'exemple "Transport": ; Mon résultat essayé ne coupe pas hors du texte lors de son positionnement sur le dessus de la div parent

HTML

<div class="contentcontainer"> 
     <div class="labels">Test 123</div> 

<div id="instructors">PlaceHOlder</div> 
<div id="ccleft"> 
<h1 class="orange">Sample</h1> 
         <ul id="instructorbullets"> 
          <li>1st Degree Blackbelt</li> 
          <li>Criminal Justice Major</li> 
          <li>Proud Dad of A.J.</li> 
         </ul> 
         <p class="normal"> lorem ipsum </p> 
</div> 
<div id="ccright"><div id="ccrightcontainter"><div id="ccrightcontaintertext"><h1 class="blue">About The Instructor</h1><p class="normal"> foo bar baz <br /><br />Lorem baz<br /><br />More text</p></div></div></div> 
</div> 

CSS

.clear { clear: both:} 

    #.labels { 
position: absolute; 
left: -15px; 
top: -15px; 
padding: 10px 10px; 
height: 35px; 
background: #0FF; 
color: #d94a3c; 
font-family: font1; 
font-size: 2.0em; 
z-index: 1; 
clear: both; 
} 
#.contentcontainer { 
position: relative; 
margin: 0 auto; 
width: 940px; 
background: #fff; 
padding-top: 20px; 
padding-bottom:20px; 
overflow:auto; 
clear:both 
} 
#ccleft { 
    position: relative; 
    margin-left: 15px; 
    width: 350px; 
    float: left; 
    clear: both; 
} 
#ccright { 
    position: relative; 
    padding-left: 5px; 
    width: 570px; 
    float: left; 
} 
#ccrightcontainter { 
    position: relative; 
    width: 550px; 
    background: #eaeaea; 
    border-radius: 5px; 
    clear: both 
} 
#ccrightcontaintertext { 
    position: relative; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 20px; 
    max-width: 500px; 
    clear: both 
} 

Answer 1

venez fourchue votre violon pour vous montrer une solution de contournement. Fondamentalement, j'ai enveloppé tout dans un outerContentContainer. La balise div est maintenant positionnée en tant qu'enfant direct de outerContentContainer. Vous pouvez ensuite ajouter un débordement: masqué dans votre ContentContainer.

On dirait un peu un hack mais overflow: hidden ou auto coupera votre contenu, mais vous en avez besoin pour auto développer selon enfant divs

violon Js est à http://jsfiddle.net/a3TvU/2/

<div class="outerContentContainer"> 
<div class="labels">Test 123</div> 
<div class="contentcontainer"> 

et la Stratégie est

.labels { 
    position: absolute; 
    top:-30px; 
    left:-30px; 
    padding: 10px 10px; 
    height: 35px; 
    background: #0FF; 
    color: #d94a3c; 
    font-family: font1; 
    font-size: 2.0em; 
    z-index: 1; 
    clear: both; 

} 

.contentcontainer { 
    position: relative; 
    margin: 0 auto; 
    width: 940px; 
    color: #fff; 
    background: #000; 
    padding-top: 20px; 
    padding-bottom:20px; 
    overflow:hidden; 
} 
.outerContentContainer{ 
    position:relative; 
} 

Wing