CSS float content creating whitespace und überlappende andere div

Ich bin gerade dabei, ein reaktionsfähiges Portfolio zu erstellen, und mir stehen ein paar Probleme bevor.CSS float content creating whitespace und überlappende andere div

Vor einem bestimmten Haltepunkt (css Medienabfrage) sind der zweite und dritte Absatz im Abschnitt "Über" auf meiner Website in Floats. Wenn das Fenster kleiner wird, beginnt der Text, die Fußzeile zu überlappen und schließlich ein Leerzeichen am unteren Rand und an der Seite zu erstellen. Wenn es den Breakpoint erreicht, werden die Floats als "none" bewertet.

Wie kann ich es so machen, dass die Höhe des Containers durch den Inhalt bestimmt wird (d. H. Das normale Verhalten)? Ich habe einen Clearfix versucht, aber das scheint nicht zu funktionieren.

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; 
}

Quelle

2017-03-29 WebDevKid

hinzufügen Versuchen Sie diese:

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

Beschreibung

Sie verwenden #about-section ID entfernen Sie die Höhe Eigenschaft oder height:auto verwenden, haben Sie eine feste Höhe gegeben. Und verwenden Sie float:left sowie Tag-IDs.

here your update code

Quelle

2017-03-29 14:59:16 LKG

Funktioniert perfekt. Danke, Kumpel. Ich habe komplett vergessen, dass ich den festen Wert hatte (es war nur eine vorübergehende Maßnahme). Ich hätte es besser wissen sollen. Ich musste den Clearfix hinzufügen, wenn das Fenster höher als 868px ist, weil ich das gleiche Problem hatte, aber jetzt funktioniert alles. Vielen Dank! – WebDevKid

So läuft dies auf Ihre p.side-by-side Definition nach unten, die auf 45% gesetzt.

Wenn Sie keine Spalten auf kleinen Bildschirmgrößen haben möchten, dann wäre der Ansatz, nur diesen 45% -Wert mit einem Break-Point über Mobile festzulegen.

Sie verwenden einen nicht mobilen ersten Ansatz, der dieses Zeug (meiner Meinung nach) schwieriger macht. Der einfachere Weg ist es, diesen Spalten keine Breitenstile hinzuzufügen und nur die 45% und den Float hinzuzufügen, sobald der Bildschirm über (sagen wir) 768px ist. Mit anderen Worten, Ihre Medienabfragen haben im Allgemeinen min Werte, nicht max.

Ich denke, ein guter Weg, um Mobile-First zu denken, ist zu erkennen, dass mobile Layouts eine Art "weniger" CSS verwenden als Desktops. So halten Sie es einfach, nur semantische HTML verwenden und dann in Stile wie die Bildschirmgröße steigt auf Start machen Spalten usw.

Quelle

2017-03-29 14:12:52 mayersdesign

Glauben Sie, dass Sie mir ein jsFiddle Beispiel geben könnte, wie Sie es tun würde? – WebDevKid

CSS float content creating whitespace und überlappende andere div

Antwort

Verwandte Themen