28172 sujets

CSS et mise en forme, CSS3

Positionner une div à côté d'une autre sans largeur définie ?

Bonjour à tous Smiley smile

Je travaille sur un site avec scrolling horizontal. J'ai une "cover" en background, puis à sa droite une div contenant du texte en colonnes, et enfin, je voudrais encore ajouter une div à la droite de la précédente.

Voici donc la structure de ma page :


<body>
<div id="content">
  <div id="post-content">
    <div id="cover"></div>
    <div id="text"><!-- columns --></div>
    <div id="theend"><p>THE END</p></div>
  </div>
</div>
</body>


Voici le CSS de ma page :

body { margin:0; padding:0; background:black; }
#content { position:absolute; height:100%; top:0; left:0; }
#post-content { position:relative; background:transparent; overflow-x: scroll; overflow-y: auto; height: 100%; top:0; left:0; }
#cover { left:0; top:0; position:absolute; height:100%; width:100%; background: url('http://www.inveralmondchs.org/wp-content/uploads/2014/02/waterfall-godafoss-iceland.jpg') center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll; }
#text { float:left; width: auto; height:100%; left:100%; position: relative; box-sizing: border-box; padding:0px; margin:0px; font-size:15px; text-align: left; color:white; font-family:'open sans'; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; -moz-column-count: auto; column-width: 300px; column-gap: 40px; }
#theend { float:left; height:100%; position: relative; width:300px; text-align:center; background: green; color:white; }


Et si vous préférez, j'ai également une démo JSFiddle avec mon cas concret : http://jsfiddle.net/kz5ch49w/47/

Je pense que le problème provient de la propriété "width" de la div #text qui n'est pas définie, car comme le contenu de mon site est dynamique, la taille du texte peut varier.

En fait, je voudrais que la div verte "#theend" apparaisse à droite de la div noire "#text".
Mais je n'y arrive pas...

Comment résoudre mon souci ?
Merci d'avance pour votre aide !
Modifié par Kysban (23 Jan 2015 - 07:10)
Bonjour,

Tu pourrais par exemple définir une largeur calculée sur ta <div id="text">. La <div id="theend"> étant fixée à 300px de large, tu peux définir ceci :

#text {
  width: calc( 100% - 300px );
}


Ainsi ton élément fera toujours toute la largeur disponible (en soustrayant celle de ta div verte). Cela te convient-il ?

PS: Sans rapport, mais il me semble que ta <div id="cover"></div> ne sert à rien, je crois que tu pourrais parfaitement mettre ton image en fond de #text de la même façon et en économisant une division vide, non ?
Merci beaucoup pour ta réponse. Smiley smile

En fait, je ne connaissais pas du tout cette fonction de calcul, ça me semble très pratique.
Mais il y a quelques inconvénients :
- je dois mettre #theend dans #text
- #theend doit avoir une largeur définie et fixe
- comme #text contient un texte en colonnes, si #theend dépasse la largeur d'une colonne alors #theend est tronquée

En fait, ma question reviendrait à savoir comment définir une largeur optimale fixe à une div contenant des colonnes gérées avec column, -webkit-column etc...

N'ai-je vraiment aucune solution pour que ma div #text ait une largeur "reconnaissable" ? Je sais que je suis dans la section CSS mais aurais-je une solution alternative en JS ?

Merci pour ta dernière suggestion. Smiley smile
Pour la div #cover, j'ai fait ainsi car je pensais qu'il fallait forcément définir une div à gauche pour ensuite pouvoir positionner #text en left:100%. De plus, dans mon projet réel, il y a d'autres div dans #cover.
Modifié par Kysban (23 Jan 2015 - 17:44)
Sujet clos
Aller à