Позиция 3 divs горизонтально внутри нижнего колонтитула

Question

У меня проблемы с позиционированием divs горизонтально внутри нижнего колонтитула. Мне нужно, чтобы divs внутри нижнего колонтитула имели равное количество пространства между ними.

Вот что я сделал до сих пор

  #submitemail 
     { 

     float:right; 
     margin-right: 280px; 
     } 
     .footerinfo3 
     { 

      float: left; 
     margin-right: 280px; 
     } 
     .footerinfo1 
     { 


     float: left; 
     margin-right: 280px; 
     } 

Вот остальная часть кода http://jsfiddle.net/U3RXD/

Answer 1

все поплавок должен быть слева поплавком: слева; read this

Answer 2

#footer div{ 
    width: 32%; 
    margin-left: 1%; 
    float: left; 
} 

Working fiddle

Answer 3

Вот пример использования display:inline-block;

JS Fiddle

footer{ 
    width:100%; 
    background:#EEEEEE; 
    height:400px; 
    text-align:center; 
} 

footer div{ 
    width:30%; 
    height:90%; 
    margin:2.5% 0 2.5% 0; 
    background:white; 
    display:inline-block; 
} 

<footer> 
    <div></div> 
    <div></div> 
    <div></div> 
</footer> 

Только быстрое примечание, если вы решите использовать float:left; во всех других ответов, которые вы может потребоваться добавить clearfix в родительский контейнер, чтобы он по-прежнему заботился о детях,

Clearfix

IE8 +

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Cross Browser Clearfix

http://css-tricks.com/snippets/css/clear-fix/

Answer 4

Поместите свой HTML в ул, список того, литий, как # один, # два, # три (я обновил ваши коды html, css)

HTML

<div id="footer"> 
     <div class="divwrapper"> 
      <ul> 
       <li id="one"> 
        <div class="footerinfo1"> 
         <h1>Contact</h1> 

         <p>Company Name 
          <br>720 Fifth Avenue 
          <br>New York NY,10019 
          <br>USA</p> 
        </div> 
       </li> 
       <li id="two"> 
        <div class="footerinfo3"> 
         <h1>Contact</h1> 

         <p>Company Name 
          <br>720 Fifth Avenue 
          <br>New York NY,10019 
          <br>USA</p> 
        </div> 
       </li> 
       <li id="three"> 
        <div class="dark"> 
         <form id="submitemail"> 
          <h1>Subscribe</h1> 

          <div class="dark"> <span><input type="text" class="check" placeholder="Please enter your email...."> 
        <input id="submit" type="submit" value="Submit"></span> 

          </div </form> 
        </div> 
     </div> 
    </div> 
    </li> 
    </ul> 
    </div> 
    </div> 

CSS

#one, #two, #three { 
    display:block; 
    float:left; 
    width:33%; 
} 

JS демо

http://jsfiddle.net/U3RXD/3/

Answer 5

Я думаю, что это то, что вам нужно :)

.divwrapper { 
margin:auto 0; 
margin-bottom: 400px; 
width: 100%; 
} 

#footer { 
padding-left: 10px; 
    background-repeat: repeat-x; 
    background-image:url("../images/footer.png") ; 
    position: relative; 
margin-top: -214px; /* negative value of footer height */ 
height: 214px; 
clear:both; 
    width: 100%; 

} 

.textcontent 
{ 
padding-top: 20px; 
float:left; 
text-align: justify; 
padding-bottom: 20px; 
} 
#submitemail 
{ 

float:right; 
margin-right: 280px; 
} 
.footerinfo1, 
.footerinfo3, 
.dark { 
float: left; 
} 
.footerinfo1, 
.footerinfo3 { 
margin-right: 50px; 
}