CSS problème de mise en forme/débordement

Question

HTML:

<div id="browse_list"> 
       <div class="browse_list_element"> 
        <span class="list_element_logo"> 
         Ghre 
        </span> 
        <span class="list_element_name"> 
         Ghre 
        </span> 
        <span class="list_element_info"> 
         Ghre 
        </span> 
        <span class="list_element_rating"> 
         Ghre 
        </span> 
       </div> 
    <div class="browse_list_element"> 
        <span class="list_element_logo"> 
         Thre 
        </span> 
        <span class="list_element_name"> 
         Thre 
        </span> 
        <span class="list_element_info"> 
         Thre 
        </span> 
        <span class="list_element_rating"> 
         Thre 
        </span> 
       </div> 
</div> 

CSS:

#browse_list, .browse_list_element 
{ 
    overflow: auto; 
    border-style: solid; 
    width: 400px; 
} 
.list_element_logo 
{ 
    width: 100px; 
    position: absolute; 
    left: 0px; 
} 
.list_element_name 
{ 
    width: 100px; 
    position: absolute; 
    left: 100px; 
} 
.list_element_info 
{ 
    min-width: 150px; 
    max-width: 100px; 
    position: absolute; 
    left: 200px; 
} 
.list_element_rating 
{ 
    width: 50px; 
    position: absolute; 
    left: 350px; 
} 

http://jsfiddle.net/F6xJ2/

Comment puis-je résoudre ce problème? Je veux que le parent (.browse_list_element) prenne la taille des enfants.

Answer 1

Est-ce ce que vous avez cherché?

http://jsfiddle.net/Kyle_Sevenoaks/Yt6Yk/

HTML: (même)

<div id="browse_list"> 
       <div class="browse_list_element"> 
        <span class="list_element_logo"> 
         Ghre 
        </span> 
        <span class="list_element_name"> 
         Ghre 
        </span> 
        <span class="list_element_info"> 
         Ghre 
        </span> 
        <span class="list_element_rating"> 
         Ghre 
        </span> 
       </div> 
    <div class="browse_list_element"> 
        <span class="list_element_logo"> 
         Thre 
        </span> 
        <span class="list_element_name"> 
         Thre 
        </span> 
        <span class="list_element_info"> 
         Thre 
        </span> 
        <span class="list_element_rating"> 
         Thre 
        </span> 
       </div> 
</div> 

CSS:

#browse_list, .browse_list_element 
{ 
    overflow: auto; 
    border-style: solid; 
    width: 400px; 
} 
.browse_list_element span 
{ 
    display: inline-block; 
} 

/*.list_element_logo /*commented out, for now 
{ 
    width: 100px; 
    position: absolute; 
    left: 0px; 
} 
.list_element_name 
{ 
    width: 100px; 
    position: absolute; 
    left: 100px; 
} 
.list_element_info 
{ 
    min-width: 150px; 
    max-width: 100px; 
    position: absolute; 
    left: 200px; 
} 
.list_element_rating 
{ 
    width: 50px; 
    position: absolute; 
    left: 350px; 
}*/