CSS Float contenu créant des espaces et chevauchement d'autres div

Je suis en train de créer un portefeuille réactif en ce moment et je me heurte à un peu de problème.CSS Float contenu créant des espaces et chevauchement d'autres div

Avant un certain point d'arrêt (requête multimédia css), les deuxième et troisième paragraphes de la section "À propos de" de mon site Web sont dans des flottants. À mesure que la fenêtre devient plus petite, le texte commence à chevaucher le pied de page et éventuellement créer un espace en bas et sur le côté. Quand il atteint le point d'arrêt, les flottants sont évalués comme 'aucun'.

Comment puis-je faire en sorte que la hauteur du conteneur soit déterminée par la quantité de contenu qu'il contient (c'est-à-dire le comportement normal)? J'ai essayé un clearfix, mais cela ne semble pas fonctionner.

https://codepen.io/webdevkid/pen/gmBVMj

HTML

<body> 
    <nav> 
     <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div> 
      <ul id="main-links"> 
       <a href="#"><li><span class="word-position">About</span></li></a> 
       <a href="#"><li><span class="word-position">Work</span></li></a> 
       <a href="#"><li class="last-child"><span class="word-position">Contact</span></li></a> 
      </ul> 
    </nav> 
    <div id="main-container"> 
     <div id="introductory-background"> 
      <div id="introductory-overlay"> 
       <div id="introductory-content"> 
        <div id="introductory-container"> 
         <h1 id="role-header">Junior Web Developer</h1> 
         <h3 id="role-support-text">...but that's not all I can do</h3> 
         <a id="read-more" class="no-select">Read More</a> 
        </div> 
       </div>     
      </div> 
     </div> 
     <div id="about-section"> 
      <br /> 
      <br /> 
      <div id="photo-frame"> 
       <div id="picture"></div> 
      </div> 
      <br /> 
      <div id="about-text-container"> 
       <p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p> 
       <br /> 
       <p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p> 
       <p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p> 
      </div> 
     </div> 
    </div> 
    <footer> 
     <p id="footer-text"> 
      &#169; 2016 Ed Garbutt. All rights reserved. 
     </p> 
    </footer> 
</body>

CSS

body { 
    margin: 0; 
} 
nav { 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    background-color: rgb(40, 40, 40); 
    border-bottom-style: solid; 
    border-bottom-color: rgb(238, 0, 0); 
    border-bottom-width: 7.5px; 
    padding-top: 14px; 
    z-index: 10; 
} 

#logo { 
    position: relative; 
    bottom: 5px; 
    font-size: 30px; 
    padding-left: 8px; 
    float: left; 
    font-family: bebas; 
} 

#word-1 { 
    color: rgb(0, 154, 205); 
} 

#word-2 { 
    color: rgb(255, 250, 250); 
} 

ul#main-links { 
    list-style: none; 
    margin: 0; 
    padding-right: 50px; 
    float: right; 
    height: 100%; 
    border-bottom: 7.5px solid transparent; 
    display: block; 
font-size: 0; 
} 

ul#main-links li { 
    display: inline-block; 
    text-align: center; 
    border-bottom-style: solid; 
    border-bottom-width: 7.5px; 
border-bottom-color: rgb(238, 0, 0); 
    color: white; 
    font-family: arcon; 
    font-size: 18px; 
    height: 100%; 
    width: 90px; 
    position: relative; 
    z-index: 2; 
} 

a:link { 
    text-decoration: none; 
} 

a:visited { 
    text-decoration: none; 
    color: white; 
} 

a:active { 
    text-decoration: none; 
    color: white; 
} 

a#logo-link { 
    text-decoration: none; 

} 

a#logo-link:visited { 
    text-decoration: none; 
    color: inherit; 
} 

a#logo-link:active { 
    text-decoration: none; 
    color: inherit; 
} 

ul#main-links > a > li > span.word-position { 
    position: relative; 
    top: 5px; 
} 

#menu-icon { 
    height: 48px; 
    width: 48px; 
    display: none; 
    cursor: pointer; 
    background-image: url("../images/hamburg-white-2.png"); 
} 

#main-container { 
    padding-top: 71.4px; 
} 

@media screen and (min-width: 656px) { 
    ul#main-links { 
     display: block !important; 
    } 
} 

@media screen and (max-width: 656px) { 

    nav { 
     height: initial; 
    } 

    #logo { 
     width: 100%; 
     float: none; 
     padding-left: 0; 
     text-align: center; 
     bottom: 8px; 
    } 

    #menu-icon { 
     display: inline-block; 
/*  float: right;*/ 
     position: absolute; 
     right: 10px; 
     top: -2px; 
    } 

    ul#main-links { 
     display: none; 
     float: none; 
     padding-right: 0; 
     padding-left: 0; 
     width: 100%; 
    } 

    ul#main-links li { 
     width: 100%; 
     display: block; 
     border: none; 
     padding: 10px 0; 
    } 

    ul#main-links li:not(.last-child) { 
     border-bottom-style: solid; 
     border-bottom-color: rgb(238, 0, 0); 
     border-bottom-width: 2.5px; 
    } 

    ul#main-links > a > li > span.word-position { 
     top: 0px; 
    } 

    #main-container { 
     padding-top: 62.4px; 
    } 
} 

@media screen and (max-width: 400px) { 
    #logo { 
     bottom: 7.5px; 
     font-size: 23px; 
     padding-left: 10px; 
     text-align: left; 
    } 

    #menu-icon { 
     height: 32px; 
     width: 32px; 
     background-image: url("../images/hamburg-white-1.png"); 
     top: 0.4px; 
     right: 20px; 
    } 

    #main-container { 
     padding-top: 52.4px; 
    } 
} 



/* ----INTORDUCTION---- */ 

#introductory-background { 
    background-image: url('../images/eternity-1024x768.jpg'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
/* min-height: 527px;*/ 
    height: 90vh; 
    background-size: 100% 100%; 
    overflow: auto; 
} 

#introductory-overlay { 
    display: table; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

#introductory-content { 
    margin-left: auto; 
    margin-right: auto; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

#introductory-container { 
    position: relative; 
    bottom: 60px; 
} 

h1#role-header { 
    display: block; 
    position: relative; 
    right: 5em; 
    opacity: 0; 
    font-size: 48px; 
    color: rgb(255, 250, 250); 
} 

h3#role-support-text { 
    display: block; 
    opacity: 0; 
    position: relative; 
    top: 20px; 
    font-size: 30px; 
    color: rgb(255, 250, 250); 
} 

#read-more { 
    border-radius: 38px; 
    background-color: rgb(255, 250, 250); 
    padding: 0.5em 1.5em; 
    font-size: 24px; 
    cursor: pointer; 
} 

@media screen and (max-width: 656px) { 

    #introductory-container { 
     bottom: 60px; 
    } 

    h1#role-header { 
     font-size: 37px; 
    } 

    h3#role-support-text { 
     top: 15px; 
     font-size: 24px; 
    } 

    #read-more { 
     font-size: 19px; 
    } 
} 

@media screen and (max-width: 400px) { 

    #introductory-container { 
     bottom: 72.5px; 
    } 


    h1#role-header { 
     font-size: 28px; 
    } 

    h3#role-support-text { 
     top: 11px; 
     font-size: 20px; 
    } 

    #read-more { 
     font-size: 16px; 
    } 
} 


/* -------------------- */ 
/* -------ABOUT-------- */ 

#about-section { 
    width: 100%; 
    height: 500px; 
    background-color: rgb(131, 111, 235); 
} 

#photo-frame { 
    margin: 0 auto; 
    background-color: royalblue; 
    width: 180px; 
    height: 180px; 
    border-radius: 100px; 
    border-style: solid; 
    border-color: beige; 
    border-width: 7.5px; 
    z-index: 2; 
} 

#photo-frame > #picture { 
    width: 100%; 
    height: 100%; 
    background-image: url('../images/Ed.png'); 
    border-radius: 100px; 
} 

#about-section > #about-text-container { 
    margin: 0 auto; 
    width: 80%; 
} 

#about-section > #about-text-container > p { 
    margin: 0; 
    text-align: center; 
/* padding: 0 3rem;*/ 
    font-size: 22px; 
} 

#about-section > #about-text-container > p.side-by-side { 
/* display: inline-block;*/ 
    width: 45%; 
    text-align: justify; 
} 

#about-section > #about-text-container > p#about-left-side { 
    float: left; 
} 

#about-section > #about-text-container > p#about-right-side{ 
    float: right; 
} 

@media screen and (max-width: 868px) { 
    #about-section > #about-text-container > p.side-by-side { 
    /* display: inline-block;*/ 
     width: 100%; 
    } 

    #about-section > #about-text-container > p#about-left-side { 
     float: none; 
     padding-bottom: 1.5rem; 
    } 

    #about-section > #about-text-container > p#about-right-side{ 
     float: none; 
    } 
} 

@media screen and (max-width: 656px) { 
    #photo-frame { 
     width: 150px; 
     height: 150px; 
    } 

    #about-section > #about-text-container { 
     width: 90%; 
    } 

    #about-section > #about-text-container > p { 
     text-align: justify; 
     padding: 0 1.5rem; 
     font-size: 20px; 
    } 
} 

@media screen and (max-width: 400px) { 
    #photo-frame { 
     width: 125px; 
     height: 125px; 
    } 

    #about-section > #about-text-container { 
     width: 100%; 
    } 

    #about-section > #about-text-container > p { 
     padding: 0 0.5rem; 
     font-size: 18px; 
    } 
} 

/* -------------------- */ 
/* -------FOOTER------- */ 

footer { 
    width: 100%; 
    background-color: black; 
} 

footer > p#footer-text { 
    margin: 0; 
    text-align: center; 
    font-family: arial; 
    color: rgb(169, 169, 169); 
    padding: 20px; 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* -------------------- */ 

.no-select { 
    -webkit-touch-callout: none; /* iOS Safari */ 
    -webkit-user-select: none; /* Safari */ 
    -khtml-user-select: none; /* Konqueror HTML */ 
    -moz-user-select: none;  /* Firefox */ 
    -ms-user-select: none;  /* Internet Explorer/Edge */ 
    user-select: none;   /* Non-prefixed version, currently supported by Chrome and Opera */ 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
}

Source

2017-03-29 WebDevKid

Essayez ceci:

#about-section { 
    width: 100%; 
    background-color: rgb(131, 111, 235); 
}

Description de

Vous utilisez #about-section id supprimer la propriété height ou utiliser height:auto, vous avez donné une hauteur fixe. Et utilisez float:left également dans p ID de balise.

here your update code

Source

2017-03-29 14:59:16 LKG

Fonctionne parfaitement. Merci mon pote. J'ai complètement oublié que j'avais la valeur de hauteur fixe (c'était juste une mesure temporaire). J'aurais du être mieux informé. J'ai dû ajouter le clearfix, car quand la fenêtre est supérieure à 868px, parce que je recevais le même problème, mais tout fonctionne maintenant. Merci! – WebDevKid

Alors cela se résume à votre p.side-by-side définition qui est fixé à 45%.

Si vous ne souhaitez pas avoir de colonnes sur les petits écrans, l'approche consiste à définir uniquement cette valeur de 45% avec un point de rupture au-dessus du mobile.

Vous utilisez une première approche non mobile qui rend ces choses plus difficiles (à mon avis). Le moyen le plus simple de le faire est de ne pas ajouter de styles de largeur à ces colonnes, et d'ajouter seulement les 45% et le flottant, une fois que l'écran est dessus de (par exemple) 768px. En d'autres termes, vos requêtes médias auront généralement min valeurs, pas max.

Je pense qu'une bonne façon de commencer à penser mobile d'abord est de réaliser que les mises en page mobiles utilisent un type de CSS «moins» que les ordinateurs de bureau. Alors vous restez simple, juste en utilisant html sémantique, puis ajouter à styles comme la taille de l'écran augmente à début colonnes faisant etc.

Source

2017-03-29 14:12:52 mayersdesign

Pensez-vous que vous pourriez me donner un exemple de la façon dont jsFiddle vous le feriez? – WebDevKid

CSS Float contenu créant des espaces et chevauchement d'autres div

Répondre

Questions connexes