Ausrichten von Text und img innerhalb eines div

Question

Derzeit die Portfolio-Herausforderung bei Codecamp. Ich versuche, einen Text über einem anderen Text und dann ein IMG neben ihnen auszurichten. Aber es scheint, als würden sie den leeren Raum in meinem div nicht erkennen.

Hier ist mein Code

#div1 { 
 
    width: 80%; 
 
    height: 500px; 
 
    background-color: #A09F9C; 
 
    text-align: center; 
 
    margin-left: 10%; 
 
} 
 
#about { 
 
    color: white; 
 
    width: 500px; 
 
    height: auto; 
 
    padding-top: 10%; 
 
    padding-left: 5%; 
 
} 
 
#avatar { 
 
    width: 300px; 
 
    height: 300px; 
 
    float: right; 
 
    border-radius: 50%; 
 
    margin-right: 5%; 
 
    margin-top: auto; 
 
}

<div id="div1"> 
 
    <p id="about">aaaaaaaaaaaaaaaaaaaaaaaaaaa ...</p> 
 
    <img id="avatar" src="http://i.imgur.com/scMYPYt.jpg"> 
 
    <h4> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </h4> 
 
</div>

This is how it's supposed to look like.

Wenn Sie einen Blick nehmen wollen, here it's my codepen.

Answer 1

prüfen:

`http://codepen.io/anon/pen/JKaqbE` 

Btw Ich empfehle Ihnen zu lernen, Materialize oder Bootstrap für schnellere Entwicklung zu verwenden.

HTML:

<div id="navtab"> 
     <ul> 
      <li class="button"><a href="#"> ABOUT</a></li> 
      <li class="button"><a href="#"> PORTFOLIO</a></li> 
      <li class="button"><a href="#"> CONTACT</a></li> 
    </div> 

    <div> 
     <div id="div1"> 
      <p id="about"> The name is Gaston and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</p> 
      <img src="http://i.imgur.com/scMYPYt.jpg"> 
      <div id="spdline"></div> 

     </div> 

     <div id="div2"> 
      <h4> PORTFOLIO </h4> 
     </div> 

     <div id="div3"> 
     </div> 
    </div> 

    <div id="div4"> 
    </div> 

    <div id="div5"> 
    </div> 

CSS:

body { 
    background-color: grey; 
} 

#navtab { 
    background-color: purple; 
    height: 60px; 
    position: fixed; 
    width: 100%; 

} 

ul { 
    padding-top: 15px; 
    padding-right: 15px;  
    float: right; 
    margin-right: 10%; 

} 

li { 
    display: inline-block; 
    padding: 5px 15px 5px 15px; 

} 

li:hover { 
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
} 

a { 
    color: grey;  
} 

a:hover { 
    color: #2B303A; 
    text-decoration: none; 
} 

li:active { 
    background-color:white; 
    text-decoration: none; 
} 

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


#div1 { 
    width: 80%; 
    background-color: #A09F9C; 
    text-align: center; 
    margin-left: 10%; 
    display: inline-flex; 
} 

#about{ 
    padding: 10% 10%; 
    color: white; 
    float: left; 
} 

img { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    margin-top: 10%; 
    margin-right: 10%; 
    margin-bottom: 50%; 
    float: right; 
} 



#spdline { 
    width: 300px; 
    height: 3px; 
    background-color: white;  
    display: block; 

} 

#div2 { 
    width: 80%; 
    background-color: white; 
    text-align: center; 
    margin-left: 10% ; 


} 

#div1, #div2, #div3 { 
    border-style: solid; 
    border-width: 1px; 
    border-color: grey; 
}