Почему мои дивины не выстраиваются в линию?

Вот мой 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>

Вот мой CSS

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

Я пытаюсь получить мою #blurb DIV выстраиваться с моим #main_pic DIV в моем родительском #content DIV, но У меня проблемы с этим. Может ли кто-нибудь указать мне в правильном направлении?

источник

2016-11-05 Ben Kulka

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

Также рассмотрите удаление высоты: 250 пикселей; из #blurb ... трудно сказать, что это необходимо по какой-то причине.

источник

2016-11-05 20:11:44 marcinrek

Почему мои дивины не выстраиваются в линию?

ответ

Смежные вопросы