Как правильно расположить блоки?

Question

[Sherlock19]

Друзья, простите за глупый вопрос. Делаю сайт, плохо зная верстку. Делаю потому что иначе никак, так что не кидайтесь камнями, пожалуйста.

У меня есть контейнер, внутри которого находятся 3 блока. В каждом блоке текст, картинка, ссылка.

Несколько вопросов:
1. Как мне правильно написать стиль, чтобы он отображался по людски?
2. Почему при свойстве inline-block класса контейнера блоки все равно располагаются ниже?
3. Почему divы, которые располагаются внутри контейнера, ведут себя как хотят и не располагаются внутри него?
4. Какие понятия/знания мне нужно погуглить, чтобы не задавать таких вопросов и не делать ошибок?

<div class="container">
    <div class="top-body" >
        <div class="left-top" >
            <p>ПУНКТ ПРОМЕЖУТОЧНОЙ СВЯЗИ ЦИФРОВОЙ С ИЗБИРАТЕЛЬНЫМ ВЫЗОВОМ</p>
            <a href="#">ППСЦ-ИВ</a>
            <img src="img/body-top.png" >
            <div class="left-top-text">
                ППСЦ-ИВ предназначен для работы в цифро-аналоговых и аналоговых сетях отделенческой телефонной избирательной связи на железнодорожном транспорте, метрополитене, газо- и нефтепроводах в качестве абонентской аппаратуры промежуточных станций, а также распорядительной станции диспетчерской связи.
            </div>
            <div class="left-top-text-price">От 700,000 руб.
            </div>
            <div class="left-top-logo">
                <img src="img/logo.png">
            </div>
        </div>

        <div class="vert-line-centre">
            <img src="img/vert-line.png">
        </div>

        <div class="centre-top" ">
            <p>ЛОКОМОТИВНО-СТАЦИОНАРНАЯ РАДИОСТАНЦИЯ</p>
            <br>
            <a href="#">РВС-1</a>
            <div class="body-center-text">
                Коммунальный модернизм, <br>несмотря на внешние воздействия.
            </div>
            <img src="img/RBS1.png">
        </div>

        <div class="right-top" >
            <p>СИСТЕМЫ АВТОМАТИКИ ДЛЯ</p>
            <br>
            <a href="#">ЖЕЛЕЗНОДОРОЖНЫХ<br> ПЕРЕЕЗДОВ</a>
            <div class="body-left-text">
                Коммунальный модернизм, <br>несмотря на внешние воздействия.
            </div>
            <img src="img/body-left.png" class="right-img">

        </div>

        <img src="img/vert-line.png" class="vert-line">
    </div>
</div>

Comments

[Sherlock19]

Вот на данный момент код css

.container {
    width: 1000px;
    margin: 0 auto;
    max-width: 1400px;
    min-width: 1000px;
    min-height: 100%;
}

.top-body {
    display: inline-block;

    width: 1000px;
    height: 375px;
    border-radius: 5px;
    box-shadow: 1px 0 5px rgba(0,0,0,0.5);
}

.left-top {
    display: inline-block;
    width: 570px;
    height: 396px;
}

.left-top img {
    float: left;
    margin-top: -11px;
}

.left-top p {
    font-size: 15px;
    font-weight: lighter;
    text-align: right;
}

.left-top a {
    color: #40a0cf;
    font-size: 20px;
    font-weight: bold;
    float: right;
}

.left-top a:hover {
    text-decoration: none;
}

.left-top-text {
    font-size: 12px;
    font-weight: lighter;
    text-align: right;
    padding-top: 35px;
}

.left-top-text-price {
    color: #40a0cf;
    font-size: 16px;
    text-align: right;
    padding-top: 10px;
}

.left-top-logo {
    float: right;
    padding-top: 20px;
}

.vert-line-centre {
    margin-left: 580px;
    margin-top: -396px;
}

.centre-top {
    display: inline-block;
    width: 199px;
    height: 375px;
    float: left;
}

.centre-top p {
    text-align: right;
}

.right-top {
    display: inline-block;
    width: 201px;
}

[Константин Величко]

Код для начала на валидаторе прогоните, исправьте ошибки

Answer 1

[Коля]

В общем виде написал.
Чуть другой пример, но смысл тот же)
jsfiddle.net/cnr28/1
или так: jsfiddle.net/cnr28/2
тут 1 класс для блоков, меньше селекторов

Comments

[Sherlock19]

Спасибо большое! А в чем же моя ошибка, подскажите пожалуйста?

[Коля]

@Sherlock19 @Sherlock19 честно, я даже толком разбираться не стал, очень много лишнего и не по существу...
Обычно хватает блока обертки(container) и блоков вида:

<div class="block2">
        <h2>Заголовок</h2>
        <p>Текст</p> 
        <img>
</div>

Answer 2

[Blah Blag]

Нигде не видать даже позишн релатива. Флоат лефт должен быть, одним инлайном не отделаешься. Заливай на фидл jsfiddle.net там посмотрим

Comments

[Sherlock19]

Я понимаю что могу подвигать блоки разными способами. Но я все равно не понимаю, почему они не располагаются друг за другом. Или это нормальная практика?

[Blah Blag]

@Sherlock19 float left попробуй, там где ты использовал инлайны