Dans le CSS, comment puis-je obtenir de gauche colonne de largeur fixe avec un tableau de droite qui utilise le reste de la largeur?

Question

J'ai donc essayé de travailler avec la pure CSS, ne jamais utiliser les tableaux de mise en page de l'évangile, je n'ai vraiment. Mais après une incroyable quantité de douleur et d'angoisse, je suis tout prêt à abandonner. Je suis prêt à aller à un certain effort pour accomplir des choses dans le CSS, ne vous méprenez pas. Mais quand il semble que certains des plus asininely des choses simples qui peuvent être fait avec des tableaux de mise en page sont tout à fait impossible en CSS, je ne m'inquiète pas si conceptuelle pureté commence vraiment à prendre une raclée.

Maintenant, il semble que je suis en colère, et que je suis; je suis en colère à propos de mon temps perdu, je suis en colère à propos de gens qui sortent de QuarkXpress horizons me remettant inutile de largeur fixe les modèles, je suis en colère à propos de l'échec de la promesse de CSS. Mais je ne suis pas en train de commencer un argument; je veux vraiment connaître la réponse à une question simple, qui permettra de déterminer si je donne la pure CSS chose, essayez un autre ou forfaitaire et utiliser des tableaux de mise en page à chaque fois que j'en ai envie. Parce que je déteste revenir à disposition des tables de penser que cette chose est impossible, si il ne l'est pas réellement.

La question est la suivante: est-il de toute façon à l'aide de pure mise en forme CSS pour avoir une colonne sur la gauche, qui est de largeur fixe, et pour le droit de placer une table de données, et les données de la table soigneusement de prendre le reste de tout l'espace disponible? Qui est, la même mise en page qui est facilement réalisable par deux cellules de tableau de présentation avec une largeur de 100% et une largeur fixe sur la cellule de gauche?

Answer 1

<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

Cela devrait le faire (évidemment de mise en œuvre varie selon l'endroit où il est dans la page, mais je pense que c'est le concept que vous cherchez).

Answer 2

Est ce ce que vous recherchez?

Je ressens votre douleur, mais essayez de ne pas le considérer comme une perte de temps. Je suis sûr que vous avez une bien meilleure connaissance de CSS que vous l'avez déjà fait. Continuer à travailler avec elle et vous allez commencer à voir les avantages. Personnellement, je trouve les CSS pour être une de ces choses qui prend beaucoup de pratique pour maîtriser. J'ai été en utilisant du CSS layouts pour les 5 ans et j'ai encore à apprendre trucs intéressants tous les jours.

Answer 3

Je pense que c'est ce que vous cherchez:

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Me remercier plus tard. =P

(Je suis évidemment une blague.... une sorte de...)

Answer 4

D'abord, je vous recommande d'Eric Meyer CSS, des livres ainsi que le CSS de référence sur le web: Une Liste à Part. J'utilise le CSS largement dans mon travail, et je pense que j'ai obtenu assez de bon.

Avec tout cela étant dit: faites ce qui fonctionne. J'ai vécu exactement la douleur que vous venez de faire l'expérience. En fin de compte, j'ai pensé que ce n'était pas la peine de compromettre ma conception juste pour être en mesure de dire que je n'avais pas utilisé les tables.

Rappelez-vous: vous n'êtes pas payés pour faire les feuilles de style CSS, vous êtes payé pour écrire de travail du logiciel.

Answer 5

Quelque chose comme ceci:

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

Bien sûr, vous devriez probablement mettre les styles dans une feuille de style distincte plutôt que dans la ligne. Et une seule colonne de largeur fixe sur la gauche est assez simple, mais de temps en temps, je ne vois d'autres mises en page qui peut être fait facilement avec des tables, mais sont, autant que je sache, diaboliquement difficile avec les CSS.