как сделать div с встроенным содержимым?

Question

http://i.imgur.com/37miZ.png вот скриншот

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

Я пробовал использовать поплавок, и он просто разрушает все.

Редактировать

Когда я поплавок: левый или плавать: право, я получаю 2 дивы для разделения, но позиционирование ужасно.

Некоторые HTML у меня есть:

<div id="container"> 
      <div id="header"> 
       <div id="nytm"> 
        <h1>New York Tech Map</h1> 
       </div> 
       <div id="form"> 
        <form> 
         <input type="text" name="zip"> 
         <input type="submit" value="Search By Zip"> 
        </form> 
       </div> 
       <div id="navlinks"> 
       </div> 
      </div> 
</div> 

Вот CSS:

#container { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    background: #EDEDED; 
    height: 79px; 
    border-bottom: 1px solid #666; 
} 

#nytm{ 
    display: inline; 
} 

#form{ 
    margin-top: 24px; 
    display: inline; 
} 

#navlinks{ 
    display: inline; 
} 

Answer 1

путь я хотел бы сделать это сначала сделать один большой DIV, а затем положить каждый поле в свои собственные div, это создает большой div с равными интервалами div внутри внутри, тогда будет легче сделать css на нем.

Answer 2

Не совсем уверен, что вы имеете в виду, но имейте в виду, что каждый новый DIV является элемент уровня блока, так он получает свою собственную строку, если вы не скажете об этом иначе. Попробуйте использовать дисплей: встроенный с вашим поплавком.

Answer 3

Хорошо, следуйте этим шагам:

В you'r файл CSS, поместите этот clearfix стилизованной класс:

.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} 
    .clearfix{display:inline-block;} 
    html[xmlns] .clearfix{display:block;} 
    * html .clearfix{height:1%;} 

    .fr{float:right;display:inline-block;} 
    .fl{float:left;display:inline-block;} 

Вам нужен этот класс для следующего раздела.

Теперь давайте посмотрим, что нам нужно в разделе HTML:

<div class="clearfix container"> 
     <div class="fl search-zone"> 
      <!-- YOUR SEARCH INPUT AND BUTTON HERE --> 
      <input type="text" /> <button>SEARCH</button> 
     </div> 
     <div class="fr links"> 
      <!-- YOUR LINKS HERE --> 
      <a href="">LINK 1</a> <a href="">LINK 2</a> <a href="">LINK 3</a> 
     </div> 
    </div> 

• clearfix класс поможет вам позицию внутри любой плавающий элемент, и это кросс-браузерный решение для этого. * Настоятельно рекомендуется предоставить классам search-zone и links a width для предотвращения проблем IE.

Надеюсь, это то, что вы ищете.

Answer 4

Проверьте это здесь, почему их позиционирование ужасно при использовании плавающего. i отрегулировать css и увидеть вывод

http://jsfiddle.net/Bq9eq/ 

Answer 5

Я думаю, что вы имеете в виду три, что вы хотите, чтобы на вашем заголовке были столбцы.

Один из способов сделать это - создать три отдельных div.

<div class="top-container"></div> 
<div class="top-container"></div> 
<div class="top-container"></div> 

Clearfix контейнер и плавают дети

#header .top-container{ 
    width:33%; 
    float:left; 
} 

Проверить эту скрипку для полного кода: http://jsfiddle.net/xZC3G/2/