Disposition de 3 colonnes, pour que la colonne du milieu s'étende plus large lorsque les colonnes 1 et 3 sont vides

Question

J'ai une disposition en 3 colonnes utilisant un design sans table.

<div id="main"> 

    <div id="left"></div> 
    <div id="content"></div> 
    <div id="right"></div> 

</div> 

Le CSS:

#left {width: 200px;float:left;display:inline;} 
#content {width: 600px;float:left;display:inline;padding: 0 10px;} 
#right {width: 160px;float:left;display:inline;} 

J'utilise une application web, et je ne peux pas changer la mise en page. Par ne peut pas changer, je veux dire que le div avec left/content/right ne peut pas être enlevé.

Sur certaines pages, les colonnes gauche et droite sont complètement vides. Et je veux le #contentdiv pour développer plus que le 600px.

est-ce possible, sans altérer le code HTML? Quelles sont mes options?

Merci beaucoup!

Answer 1

Je ne suis pas sûr de faire cela avec du CSS pur, mais puisque jquery a été tagué dans la question, je vais supposer que c'est un jeu équitable.

Prenez les éléments suivants par exemple. Ce que nous faisons ici vérifie si les divs #left ou #right sont vides. Si c'est le cas, nous augmentons la largeur de div # content, respectivement.

$(document).ready(function(){ 
    if($('#left').height() == 0){ 
     $('#content').width($('#content').width() + $('#left').width()); 
    } 
    if($('#right').height() == 0){ 
     $('#content').width($('#content').width() + $('#right').width()); 
    }   
}); 

Ce script peut probablement être améliorée, comme son comptage sur l'idée qu'une div vide aura une hauteur de zéro. J'ai pensé à utiliser le sélecteur de pseudo vide, mais cela échouera s'il y a un espace blanc à l'intérieur de la div.