Pozycjonowanie elementów w CSS

pytanie zadane 6 stycznia 2018 w HTML i CSS przez sosick Nowicjusz (160 p.)

Cześć,

uczę się podstaw HTML i CSS. Napotkałem na problem z którym nie potrafię sobie poradzić. Mam zadanie, aby ustawić elementy identycznie jak na poniższym obrazku:

W pierwszym wierszu mają być dwa elementy div, w drugim dwa paragrafy.

Mój kod wygląda następująco, HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task 8</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="left">Div 1.</div>
    <div class="right">Div 2.</div>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
</body>
</html>

i CSS:

.left {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
p {
    display: inline-block;
    width: 80px;
    border: 2px dotted red;
}

Jednak cały czas (a próbowałem już kilku rozwiązań) wychodzi mi coś takiego:

Czyli paragrafy znajdują się pomiędzy divami. A nie pod nimi. Nie wiem co zrobić, aby kod wyglądał jak na pierwszym zdjęciu. Z góry dziękuję za pomoc!

3 odpowiedzi

odpowiedź 6 stycznia 2018 przez PaulGilbert Gaduła (3,280 p.)

Dodaj pustego diva po tamtych ze stylem clear:both i wszystko się ustawi tak jak chcesz.

komentarz 6 stycznia 2018 przez sosick Nowicjusz (160 p.)

Dziękuję bardzo, wszystko jest tak jak powinno. :)

komentarz 6 stycznia 2018 przez Shaoi Mądrala (7,020 p.)

Dodaj pustego diva po tamtych ze stylem clear:both i wszystko się ustawi tak jak chcesz.

Nie, tak się tego nie robi. Pusty tag to najgorsze rozwiązanie tego problemu.

komentarz 6 stycznia 2018 przez PaulGilbert Gaduła (3,280 p.)

Można w niego wpakować dwa paragrafy, żeby nikt nie marudził.

odpowiedź 6 stycznia 2018 przez imklau Nałogowiec (42,090 p.)

odpowiedź 6 stycznia 2018 przez bulgotnik86 Gaduła (3,040 p.)

A ja Ci tak poradze to zrobić:

Stwórz diva na np 100% szerokości rodzica , nazwij go np. id="wrapper" i zamknij w nim div class=left i div class=right. W ten sposób oddzielisz od siebie sekcje diwów i paragrafów. W ogóle stronę warto dzielić na sekcje bo potem przy tworzeniu wersji mobilnej jest to wszystko dużo łatwiej ogarnąć. Porządek!!!

Tera css:

#wrapper{

position:relative;

}

.left{

position:absolute;

top:20px;

left:0;

}

.right{

position:absolute;

top:20px;

right:0;

}

Zapamiętaj sobie ten układ: rodzic pozycja relatywna , dzieci -pozycja absolutna względem rodzica. Pozdrawiam Cię