Плавающие дивы не плавают правильно

Question

Это мой первый пост здесь, так как я нахожусь в своем уме, так что подумал, что я прыгну и, наконец, попросить помощи!

У меня есть раздел «Свяжитесь с нами» на веб-сайте, который я разрабатываю, содержащий небольшой абзац о нас, электронную почту и телефон. Рядом с ним есть контактная форма электронной почты, которую я получил от php form Builder. Все шло гладко, пока я не бросил этого плохого парня.

В любом случае, вот мой код для «Обёртки» для контактов:

#contact {
 background-image:url(img/contact_bg.jpg);
 background-repeat: no-repeat;
 width: 820px;
 height: 459px;
 margin: 25px 70px 50px 70px;
 clear: both;
 }

#thanks {
 width: 324px;
 height: 100px;
 padding-top: 35px;
 }

#thanks span {
  font-size: 1.5em;
  font-weight: normal;
  font-style: italic;
  letter-spacing:1px;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
  text-decoration: none;
  padding: 0 0 0 25px;
 }

#details {
 width: 324px;
 height: 63px;
 padding-top: 25px;
 clear: both;
  }

#details span {
 font-size: 1.115em;
 font-weight: normal;
 font-style: italic;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 text-decoration: none;
 padding: 0 0 0 25px;
 clear: both;
 }

#about {
 width: 324px;
 clear: both;
 }

#about h2 {
 font-size: 1.618em;
 font-weight: normal;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 padding-left: 25px;
 text-decoration: none;
 clear: both;
 }

#about span {
 font-size: 1em;
 font-weight: normal;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 line-height: 14px;
 text-decoration: none;
 padding: 10px 0 0 25px;
 clear: both;
 }

и вот моя форма css:

  #form {
   margin:0 auto;
   text-align:left;
   width:391px;
   height: 459px;
   float: right;
   }

  form.appnitro {
   margin:20px 20px 0;
   padding:0 0 20px;
   }

Вот несколько скриншотов:

Вот как это должно выглядеть: Вот как это выглядит сейчас :(

Любая помощь очень ценится, если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Большое спасибо!

Answer 1

Ваши #thanks и ваши #about находятся в свободном обращении, поэтому ваша контактная форма, хотя и всплывающая, появляется под ними. Вам нужно пропустить и #thanks и #about float:left.

У вас также есть много clear:both, которые будут сбрасывать поток документов, вероятно, вызывая некоторые проблемы, которые вы видите. Трудно сказать, не видя настоящего HTML.

Answer 2

Все, что вам нужно сделать, это поместить еще один div вокруг содержимого левой руки и поместить его влево, вот так

<div style="float:left">
    <div id="thanks">
        <span>Thank you for your interest in Dan James construction. Please contact us using a method convenient for you.</span>
    </div>

    <div id="details">
        <span>Tel: 07749 121959</span>
        <span>Email: info@danjamesconstruction.com</span>
    </div>

    <div id="about">
        <h2>ABOUT US</h2>
        <span>Dan James construction are specialists in loft 
conversion based in North London and covering the whole of the M25 area.</span><span>We guide you through every stage of your 
development journey, right from the no obligation FREE estimate to the fine finishing touches.</span><span>So whether you're looking for more space or looking to add value get in touch today to start your very own conversion</span>
    </div>

</div>

Это должно сработать, дайте мне знать, как оно идет; -)