Résolu [Positionnement - CSS] Aside & Section

[Wazau]

Bonjour, me voici avec un petit soucis de positionnement en css... Encore...

Ma structure est la suivante :

HEADER (avec un nav dedans)
ASIDE SECTION
FOOTER

Le problème est que je n'arrive pas à placer mon Aside et Section cote à cote...

Voici mes codes :

HTML :

<header>blabla</header>
<aside>Mon aside en rouge</aside>
<section>Ma section en vert</section>
<footer>blablabla</footer>

CSS :

aside, section {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
section{
 background: green;
 width: 85%;
 height: 100%;
}

mais voici ce que cela me donne..

(lien image :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

)

Merci d'avance pour votre aide !

 

[deleted577633]

Bonjour, me voici avec un petit soucis de positionnement en css... Encore...

Ma structure est la suivante :

HEADER (avec un nav dedans)
ASIDE SECTION
FOOTER

Le problème est que je n'arrive pas à placer mon Aside et Section cote à cote...

Voici mes codes :

HTML :

<header>blabla</header>
<aside>Mon aside en rouge</aside>
<section>Ma section en vert</section>
<footer>blablabla</footer>

CSS :

aside, section {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
section{
 background: green;
 width: 85%;
 height: 100%;
}

mais voici ce que cela me donne..

(lien image :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

)

Merci d'avance pour votre aide !

Salut,

Si tu veux les placer côte à côté il faut utiliser la fonction float

float: left pour le bonjour en rouge
float: right pour le bonjour en vert

 

[Lagger]

Bonjour,

Pour ton problème tu peux utiliser la technique du flexbox :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Ou utiliser tout simplement la fonction float :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Bonne soirée,
Lagger

 

[Wazau]

Bonjour en fait, je viens de voir pourquoi cela ne fonctionnait pas. C'est du à un autre partie de mon css :

html, body {
      height: 100%;
        min-width: 700px;
        text-align: justify;
}
body {
      display: flex;
      flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
}
section {
      flex: 1 0 auto;
      margin:0px;
        max-width: 100%;
}

Le code indiquer dans mon premier message était juste. Néanmoins c'est le code au dessus qui le rend inutilisable tout comme pour l'utilisation de float etc...
Néanmoins j'ai besoin de ce code ( ci dessus ) pour mettre le footer en fin de page facilement.

 

[deleted577633]

Bonjour en fait, je viens de voir pourquoi cela ne fonctionnait pas. C'est du à un autre partie de mon css :

html, body {
      height: 100%;
        min-width: 700px;
        text-align: justify;
}
body {
      display: flex;
      flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
}
section {
      flex: 1 0 auto;
      margin:0px;
        max-width: 100%;
}

Le code indiquer dans mon premier message était juste. Néanmoins c'est le code au dessus qui le rend inutilisable tout comme pour l'utilisation de float etc...
Néanmoins j'ai besoin de ce code ( ci dessus ) pour mettre le footer en fin de page facilement.

Et en forcant le code avec un !important ?

 

[Wazau]

Et en forcant le code avec un !important ?

Pas bête ! Je vais aller voir ce que ça donne.

Edit :
Avec ce code

aside, section {
 display: inline-block !important;
}

Cela n'a pas arrangé les choses.

 

[deleted577633]

Pas bête ! Je vais aller voir ce que ça donne.

Edit :
Avec ce code

aside, section {
 display: inline-block !important;
}

Cela n'a pas arrangé les choses.

En fait ce que tu veux faire c'est mettre les 2 Bonjour côte-à-côte ?

 

[Wazau]

J'ai réussi a avoir un début de ce que je souhaitai !
J'ai utilisé:

<section>
<aside>bonjour</aside>
<article>bonjour</article>
<section>

et

html, body {
     height: 100%;
       min-width: 700px;
       text-align: justify;
}
body {
     display: flex;
     flex-direction: column;
       flex-wrap: nowrap;
       margin: 0;
}
section {
     flex: 1 0 auto;
     margin:0px;
       max-width: 100%;
}
aside, article {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
article{
 background: green;
 width: 85%;
 height: 100%;
}

Le seul problème maintenant c'est qu'il ne prend pas tous l'espace disponible.
Il y a sans doute un rapport avec la propriété flex de la balise section. Mais je ne suis pas encore très performant avec les flexbox. (@Lagger )

 

[deleted577633]

J'ai réussi a avoir un début de ce que je souhaitai !
J'ai utilisé:

<section>
<aside>bonjour</aside>
<article>bonjour</article>
<section>

et

html, body {
     height: 100%;
       min-width: 700px;
       text-align: justify;
}
body {
     display: flex;
     flex-direction: column;
       flex-wrap: nowrap;
       margin: 0;
}
section {
     flex: 1 0 auto;
     margin:0px;
       max-width: 100%;
}
aside, article {
 display: inline-block;
}
aside {
 background: red;
 width: 15%;
 height: 100%;
}
article{
 background: green;
 width: 85%;
 height: 100%;
}

Le seul problème maintenant c'est qu'il ne prend pas tous l'espace disponible.
Il y a sans doute un rapport avec la propriété flex de la balise section. Mais je ne suis pas encore très performant avec les flexbox. (@Lagger )

Si tu veux l'espace souhaité pourquoi pas utiliser du responsive ( % ) à la place des px ?

 

[Wazau]

Si tu veux l'espace souhaité pourquoi pas utiliser du responsive ( % ) à la place des px ?

Partout j'utilise des % haha (sauf pour le width du body mais cela ne change rien au problème)

 

[deleted577633]

Partout j'utilise des % haha (sauf pour le width du body mais cela ne change rien au problème)

C'est vrai, bon après je ne fais que m'entraîner au CSS donc je ne peux pas t'en dire plus,
Cependant @Paul GTP lui pourra trouver ta solution.

Bonne fin de soirée

 

[Wazau]

C'est vrai, bon après je ne fais que m'entraîner au CSS donc je ne peux pas t'en dire plus,
Cependant @Paul GTP lui pourra trouver ta solution.

Bonne fin de soirée

Merci pour toute l'aide que tu m'as apporté en tout cas.
En attendant d'autre solution .