Comment faire pour déborder: caché cachez vraiment le contenu?

Question

Veuillez regarder this example. J'ai l'intention de faire une mise en page horizontale avec du html/css pur, ne dérange pas de vieux navigateurs. Je l'ai fait avec la technique display: table. Mais l'affichage des conteneurs de texte principal (jaune clair) est devenu un problème. Chacun de ces éléments a overflow: hidden pour empêcher le défilement vertical. Plus tard, j'ai l'intention d'ajouter un effet d'ombre en bas. Maintenant, je veux faire, par exemple, 80% de hauteur avec 10% de marge supérieure et inférieure. Mais ce que je reçois est un conteneur avec un texte plus grand qui étire tout le conteneur des parents (vert clair), donc 80% est devenu trop grand.

Est-il possible de l'éviter sans javascript?

Peut-être que je peux obtenir une hauteur de conteneur de texte, mais avec une certaine marge en bas. J'apprécierai n'importe quelle solution.

Answer 1

Ne pas utiliser layouts de table, divs de cellules de table ont un problème de leur réglage de largeur/hauteur et ne sera donc pas en mesure de suivre les règles de débordement.
mise à jour des propriétés CSS suivantes dans votre layout.css, cela vous commencer:

#content{ 
    display:block; 
    height:90%; 
    overflow:hidden; 
    vertical-align:top; 
} 

#content-inner{ 
    display:block; 
    height:100%; 
    vertical-align:top; 
} 

.article{ 
    display:inline-block; 
} 

Answer 2

Il est toujours pas clair ce que vous voulez; peut-être poster un croquis rapide?

De toute façon, je voudrais éviter la barre de défilement horizontale. Pour faire ce jeu #content { width: 61%;} (basé sur le reste de la CSS). Actuellement, dans layout.css, #content width est défini sur 305%.

RE:

@Brock Adam, je veux dire que je veux faire div.article contenu 80% de l'écran, et non 80% du conteneur parent. Je crois que cela peut être réalisé en forçant le contenu div # parent être exactement 100% de l'écran, pas plus. Mais je ne sais pas comment.

div.article-content apparaît actuellement 5 fois dans la page. Le réglage à 80% de l'écran donnera une page qui est au moins 400% plus large que ce que l'utilisateur peut voir.

Questions:

1. La première div est comme a identifié "tête", mais il est flottais à gauche et à seulement 39% de large. S'agit-il d'un en-tête (barre en haut de la page) ou d'une barre latérale gauche?
2. Les articles doivent-ils être en 5 minuscules colonnes, sur la même rangée, ou sont-ils censés être l'un après l'autre, en faisant défiler la page?

Encore une fois, les instructions et la sémantique de la page d'exemple ne sont pas claires. L'affichage d'un croquis rapide de la disposition souhaitée nous aidera à vous aider.