Как остановить текст в DIV, толкая другие DIV вниз по странице?

Question

Я хочу выровнять текст в моем div («что» и «где»), но теперь, когда у меня есть текст внизу, он сдвинул div (search-field1 и searchfield2) дальше вниз по странице! *

Как это сделать, чтобы текст не повлиял на это? Это как-то связано с cellpadding / spacing?

Извините, я не лучший в CSS, я учу себя этому.

HTML:

<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>

<center>
<div class="search-field1">

</div>
<div class="search-field2">

</div>
</center>

CSS:

.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;


}

.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;

}

.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}

.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}

Спасибо!

Джеймс

Answer 1

Джеймс, это то, что вы ищете?http://jsfiddle.net/jkeyes/WFPK2/

Установите высоту строки для ваших контейнеров (в данном случае .what и .where равны высоте:

line-height: 35px;

Answer 2

Другой вариант - установить нулевую высоту строки в скрытом элементе div следующим образом:

    line-height: 0px;

Затем добавьте отступы к окружающим элементам div. Вот так:

    padding-top: 10px;

Надеюсь, это кому-нибудь поможет.

Answer 3

Html:

<div class="center">
    <div class="what">what?</div>
    <div class="where">where?</div>
</div>

<div class="center">
    <div class="search-field1"></div>
    <div class="search-field2"></div>
</div>

CSS: Если вы используете float:left на вмещающих элементах div, это позволит двум center элементам div плавать рядом.

.center {
    float:left;
}

Answer 4

звучит так, как вам нужно float:left на ваших center тегах