Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous row. It seems like the issue lies in the CSS file.
To illustrate, consider the following example:
.row1 {
float: left;
width: 70%;
margin-bottom: 50px;
}<head>
<link rel="stylesheet" type="text/css" href="syle.css">
</head>
<div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<div class="row1">
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
</div>Can you provide any insight on how to resolve this issue?