Faire des divs d'auto-remplissage de l'espace

J'ai donc été d'essayer de comprendre un problème avec mes divs ici; comment traduire mon design dans la mise en page, et je n'ai pas eu beaucoup de chance avec la recherche ou la mise en œuvre. Dans le lien, où vous voyez //PORTEFEUILLE et une ligne s'étendant du bord de la zone de contenu, il y a une ligne rouge. Maintenant j'ai à la fois la //de PORTEFEUILLE et de la ligne rouge divs ensemble à un pixel en largeur, mais je veux être en mesure d'avoir les deux divs réglage automatique de la largeur (la première pour définir automatiquement sa largeur en fonction de combien l' //TITRE reprend, et la seconde pour remplir l'espace restant dans le récipient) puisque je vais avoir d'autres sections du site web faisant la même chose, et vous ne voulez pas mesurer plus précisément pour chaque zone. Toutes les suggestions sont la plupart de bienvenue, je vous remercie beaucoup!

Exemple

Div (tous les éléments de bloc) auront leur largeur de 100% de l'espace disponible, de toute façon, le problème avec le vôtre, c'est qu'ils sont flottaient, et de disposer de deux éléments flottaient côte à côte, ils doivent avoir des largeurs de jeu et le total de ces ne doit pas dépasser la largeur de l'élément parent. Vous pouvez définir ces deux colonnes à 50%, mais alors vous n'aurez aucun espace entre eux, mais si vous ajouter un peu de rembourrage vous pourrez ainsi augmenter la largeur au-delà de 50%, de sorte que l'habitude de travailler. Pas de réponse en tant que telle, je le sais, de ces problèmes là où il est difficile de voir comment div peuvent remplacer les tables.

OriginalL'auteur Justin | 2011-07-04

  1. 8

    Voir: http://jsfiddle.net/GmtMK/1/ (modifier la largeur de la fenêtre du navigateur)

    <div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"></div>
</div>

#columnA {
    font-family: 'ProximaNovaRegular', Geneva, sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    color: #C10000;
    margin-bottom: 20px;
    letter-spacing: 4pt;
}
#title {
    float: left
}
#line {
    overflow: hidden;
    height: 9px;
    border-bottom: 1px solid #c10000;
}
    oh, overflow: hidden fait le travail ensuite. J'aime ce +1
    Bien sûr! Je suis totalement devraient avoir pensé à l'utiliser overflow: hidden! Je vous remercie beaucoup pour votre aide! C'est totalement m'a sauvé d'avoir à faire une tonne de travail supplémentaire.

    OriginalL'auteur thirtydot

  2. 2

    Tout d'abord, permettez-moi de vous compléter sur votre site web, c'est joli et élégant!
    Deuxièmement, j'ai une solution pour vous, en utilisant display: table propriété css, cependant, elle nécessite l'ajout d'un <hr /> élément est de ne pas vous laisser avoir des cellules d'inégale hauteur:

    <div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

    Veuillez voir l'exemple complet: http://jsfiddle.net/GmtMK/

    Cela fonctionne, mais il ne fonctionne pas dans IE7. Je vais voler votre jsFiddle pour montrer une autre solution.
    Je vous remercie beaucoup pour votre aide! Et merci pour le compliment! Je n'ai pas eu la chance d'avoir beaucoup de critique sur la conception réelle encore, de sorte qu'il aide vraiment à entendre qu'il a l'air correct. Il fait ma journée.

    OriginalL'auteur Грозный