Здравствуйте, я только начал изучать, и я пытаюсь создать макет на HTML5, но я не совсем понимаю, как я могу поместить абзац в нужное место. Например, я перемещаю некоторые абзацы влево, а затем плаваю некоторые другие абзацы вправо, но получается так:
Я хочу, чтобы фиолетовые и зеленые абзацы были слева, а остальные - справа.
.hersey {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ilk {
background-color: darkmagenta;
float: left;
}
.iki {
background-color: green;
float: left;
}
.thr {
background-color: hotpink;
float: right;
}
.author {
background-color: yellow;
}
<div class="hersey">
<div class="ilk">
<h1>Document</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos
cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum,
aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea
minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque
reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
</div>
<div class="iki">
<h2>Other Documents For U</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias
earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit
quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur
at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam.
Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate
libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint
placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
</div>
<div class="thr">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="author">
<h4>Writer</h4>
<p>Babark17</p>
<p><img src="me2.jpg" alt=""></p>
</div>
Ценю вашу помощь, я знаю, что это вопрос для начинающих, но я действительно не мог понять, как это сделать.