Три divs неспособны выровнять по горизонтали

Question

Я нашел другое сообщение здесь с кем-то, имеющим ту же проблему, что и я, за исключением изображений. Это решение уже было похоже на мой существующий код, и я все еще не мог исправить эту проблему.

У меня есть 3 дивы, что имеет потребности быть расположены так:

____ ____ ____ 
    ____ 
    ____ 

Середина DIV является DIV, содержащий в основном только чистый текст и HR-теги. Предпочтительно, я хотел бы, чтобы два divs поместили влево/вправо, чтобы быть в фиксированном положении. Вместо того, чтобы вставлять много кода в этот пост, я загрузил файлы (только индекс и style.css) в это место: orebropartiet.se/dev/k

Как вы можете видеть, это выглядит ужасно. Зачем?

Answer 1

#contain { 
    width: 24%; 
    line-height: 16px; 
    float: left; 
} 
#middle { 
width: 50%; 
color: white; 
display: inline-block; 
text-align: center; 
float: left; 
} 
#contain2 { 
    width: 24%; 
    line-height: 16px; 
    float: left; 
} 

Просто заставьте их всех поплавать влево, он будет работать нормально, так как ваш контейнер #all имеет ширину 100%. Чтобы сделать divs отзывчивыми для разных разрешений экрана, я добавил ширину в процентах.

<div id="all"> 

<div id="contain" style="text-align: center;"> 

    <p class="bigger">#utmanajimmie ni med!</p> 
    <hr width="250px" size="1px" color="#D88031"> 
    <p class="bigger">Dela?&nbsp; <a href="https://www.facebook.com/sharer/sharer.php?u=http://utmanajimmie.se">facebook</a> | <a href="https://twitter.com/home?status=De%20b%C3%A4sta%20motdemonstranterna%20just%20nu!%20%23utmanajimmie%20www.utmanajimmie.se">twitter</a> </p> 
    <hr width="250px" size="1px" color="#D88031"> 

</div> 

<div id="middle"> 

    <h3>Bästa motdemonstranterna just nu:</h3> 
    <h1>Uppsala</h1> 
    <p>Kul text här</p> 

</div> <!-- wrapper --> 

     <div id="contain2" style="margin-top: 50px"> 

     <fieldset id="contact_form"> 
     <legend><p class="bigger">Nominera och rösta!</p></legend> 
     <div id="result"></div> 
      <label for="name"><span></span> 
      <input type="text" name="name" id="name" placeholder="Namn"> 
      </label> 

      <label for="email"><span></span> 
      <input type="email" name="email" id="email" placeholder="E-post"> 
      </label> 

      <label for="message"><span></span> 
      <textarea name="message" id="message" placeholder="Din röst eller nominering! Motivera gärna med beskrivning och nyhetsartiklar."></textarea> 
      </label> 

      <label><span>&nbsp;</span> 
      <button class="submit_btn" id="submit_btn">Skicka</button> 
      </label> 
     </fieldset> 

     </div> <!-- contain2 --> 

</div>