내 div가 왜 정렬되지 않습니까?

여기, 여기 내 CSS 내 부모 #content div에 내 내 #main_pic의 사업부로 줄을 내 #blurb의 사업부를 얻으려고내 div가 왜 정렬되지 않습니까?

body { 
    background-color: #021034; 
    padding: 0px; 
    margin: 0px; 
} 

#navigation { 
    position: fixed; 
    background-color: black; 
    height: 40px; 
    width: 100%; 
    color: white; 
    color: #adb7bd; 
    font-family: 'Lucida Sans', Arial, sans-serif; 
    font-size: 16px; 
    line-height: 26px; 
} 

div.navigation_tile { 
    height: 30px; 
    width: 15%; 
    align-content: center; 
    text-align: center; 
    float: right; 
    margin: 5px; 
} 

div.navigation_tile:hover { 
    background-color: #092466; 
} 

div.navigation_tile:active { 
    background-color: white; 
    color: black; 
} 

#content { 
    margin-top: 30px; 
    display: inline-block; 
    text-align: justify; 
} 

#blurb{ 
    padding: 40px 0 0 25px; 
    width: 28%; 
    height: 250px; 
} 

#main_pic { 
    float: right; 
    width: 66%; 
    height: 250px; 
    border: 10px #092466 solid; 
    overflow: hidden; 
} 

h1{ 
    color: #A5B7E3; 
    font-family: 'Lato', sans-serif; 
    font-size: 54px; 
    font-weight: 300; 
    line-height: 58px; 
    margin: 0 0 20px; 
} 

h2 { 
    color: #6681C4; 
    font-family: 'Lato', sans-serif; 
    font-size: 34px; 
    margin: 0 0 10px; 
} 

p{ 
    text-indent: 20px; 
    color: white; 
    font-size: 12px; 
    font-weight: 100; 
    font-family: 'Lucida Sans', Arial, serif; 
    line-height: 20px; 
} 

img.social_media_icon{ 
    height: 15px; 
    width: 15px; 
    padding: 5px; 
} 

#footer { 
    height: auto; 
    width: 100%; 
    background-color: black; 
    text-align: center; 
    padding: 5px; 
}

가 내 HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Oaki Softworks 
    </title> 
    <link href='style.css' rel='stylesheet' type='text/css'> 
    <link rel="icon" href="favicon.png"> 
</head> 
<body> 
    <div id="navigation"> 
     <div style="height:20px;width=15%;float:right;"> 
      <a href="https://www.facebook.com/oakisoftworks/?fref=ts"><img src="facebook_icon.png" class="social_media_icon"></a> 
      <img src="instagram_icon.png" class="social_media_icon"> 
      <img src="twitter_icon.png" class="social_media_icon"> 
      <img src="youtube_icon.png" class="social_media_icon"> 
     </div> 
     <div class="navigation_tile">Contact Us</div> 
     <div class="navigation_tile">Careers</div> 
     <div class="navigation_tile">Products</div> 
     <div class="navigation_tile">About Us</div> 
    </div> 
    <div id="content"> 
     <div id="blurb"> 
      <img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;"> 
      <h2>Video games as art.</h2> 
      <p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p> 
     </div> 
     <div id="main_pic"> 
      <img src="art.jpg"> 
     </div> 
    </div> 
    <div id="footer"> 
     <p> 
      Oaki Softworks&trade; 
      <br>Fort Collins, CO 80521 
      <br>[email protected] 
     </p> 
    </div> 
</body> 
</html>

하지만, 나는 그렇게하는 데 어려움을 겪고있다. 누군가 올바른 방향으로 나를 가리킬 수 있습니까?

출처

2016-11-05 Ben Kulka

#blurb { 
    [...] 
    float: left; 
} 
#content { 
    [..] 
    overflow: hidden; 
}

높이 제거 : 250px; #blurb에서 ... 말하기가 어려울 이유가 있습니다.

출처

2016-11-05 20:11:44 marcinrek

내 div가 왜 정렬되지 않습니까?

답변

관련 문제