Как я могу держать мои две секции на одной линии?

Поэтому я работаю над дизайном веб-сайта, где два раздела стоят рядом друг с другом, но по какой-то причине один раздел уходит под другой. Может кто-нибудь помочь мне найти проблему? Спасибо!

HTML-код:

<section id="sec1">
  <img src="https://tse1.mm.bing.net/th?&id=OIP.Mbd6b4f30000f7e872ca4c55c2cedd6fao0&w=300&h=215&c=0&pid=1.9&rs=0&p=0&r=0" id="img1">
  <h6 class="bodytext">Watershed Definition</h6>
  <p class="bodytext">A ridge or area of land that separates waters flowing to different rivers, basins, or seas</p>
</section>
<section id="sec2">
  <img src="http://www.nature-education.org/estuary.gif" id="img1">
  <h6 class="bodytext">Estuary Definition</h6>
  <p class="bodytext">An arm or inlet of the sea at the lower end of a river or body of water.</p>
</section>

код CSS:

#sec1 {
background-color: #75c776;
width: 400px;
height: 550px;
margin-left: 300px;
margin-top: 40px;
border-radius: 5px;
border-style: solid;
clear: right;
}
#sec2 {
background-color: #75c776;
width: 400px;
height: 550px;
margin-left: 800px;
margin-top: 40px;
border-radius: 5px;
border-style: solid;
clear: left;
}

2 ответа

  1. Попробуйте этот код вы получите решение 🙂

    #sec1 {
    background-color: #75c776;
    width: 400px; 
    height: 550px;
    margin-left: 300px;
    margin-right:50px;
    margin-top: 40px;
    border-radius: 5px;
    border-style: solid;
    float:left;
    }
    #sec2 {
    background-color: #75c776;
    width: 400px;
    height: 550px;
    margin-top: 40px;
    border-radius: 5px;
    border-style: solid;
    float:left;
    }
    

    Введите описание изображения здесь

  2. Вы, кажется, пытаетесь плавать их (от вашего использования clear: left/right)?

    У вас нет float set, хотя…

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