Hi again friends. I have an annoying little table that I wanted text to wrap around. I’ve got the gist of how to do this enough to present a rough impression of what I’m aiming for. Predictably it doesn’t work — or rather, it doesn’t honor the left margin (16px) I’ve given the table.
So I just want a 16px margin to the left of the table.
And actually . . . feel free to do this completely a different way! I just want the margin to the right of the table how I have it now and 1rem margins around the other 3 sides.
And here’s a codepen: https://codepen.io/semicodin/pen/BaqvMgo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>99 TESTING WRAPAROUND ᰄ semicodin</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 1080px;
margin-left: 5%;
margin-right: 5%;
font-size: 1.13rem; /* 18px */
line-height: 1.05;
font-weight: 500;
font-family: 'Roboto', SANS-SERIF;
}
.dblue {color: dodgerblue}
table, th, td {
width: 340px;
margin-right: 15%;
margin-top: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 6px;
border: 1px solid black;
border-collapse: collapse;
font-size: 1.13rem; /* 18px */
line-height: 1.05;
font-weight: 600;
font-family: 'Crete Round', Serif;
}
.riteo {
text-align: right;
}
#prime {
margin-left: 5%;
margin-right: 5%;
margin-top: 3.13rem; /* 50px */
color: black;
text-align: left;
font-size: 1.13rem; /* 18px */
line-height: 1.05;
font-weight: 500;
font-family: 'Roboto', Sans-Serif;
}
</style>
</head>
<body>
<div id="prime">
<h1>Lorem Ipsum</h1>
<div class="riteo">
Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodale eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam
<table align="right">
<tbody>
<tr>
<td style="color: dodgerblue; width: 15px; text-align: right;">ONE</td>
<td style="width: 230px; text-align: left;"><span class="dblue">ᐞ</span>ONE ONE ONE ONE</td></tr>
<tr>
<td style="color: dodgerblue; width: 15px; text-align: right;">TWO</td>
<td style="width: 230px; text-align: left;"><span class="dblue">ᐞ</span>TWO TWO TWO TWO</td></tr>
<tr>
<td style="color: dodgerblue; width: 15px; text-align: right;">THREE</td>
<td style="width: 230px; text-align: left;"><span class="dblue">ᐞ</span>THREE THREE THREE THREE</td></tr>
<tr>
<td style="color: dodgerblue; width: 15px; text-align: right;">FOUR</td>
<td style="width: 230px; text-align: left;"><span class="dblue">ᐞ</span>FOUR FOUR FOUR FOUR</td></tr>
</tbody>
</table>
rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequata, nulla Phasellus orci. Etiam tempor elit auctor magna. Nullam nibh velit, vestibulum ut, eleifend non, pulvinar eget, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer velit mauris, convallis a congue sed, placerat id, odio. Etiam venenatis tortor sed lectus. Nulla non orci. In egestas porttitor quam. Duis nec diam eget nibh mattis tempus. Curabitus accumsan pede id odio. Nunc vitae libero. Aenean condimentum diam et turpis.
<BR><BR>
Vestibulum non risus. Ut consectetuer gravida elit. Aenean est nunc, varius sed, alquam eu, feugiat sit amet, metus. Sec venenatis odio id eros.
Phasellus placerat purus vel mi. In hac habitasse platea dictumst. Donec aliquam porta odio. Ut facilisis. Donec ornare ipsum ut massa. In tellus tellus, imperdiet ac, accumsan at, aliquam vitae, velit.
</div> <!-- ENDING RITEO -->
</div> <!-- ENDING PRIME -->
</body>
</html>