Help me get this to display better

HTML & CSS
1

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 &#7172; 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">&#5150;</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">&#5150;</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">&#5150;</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">&#5150;</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>
2

There’s no left margin in your code. Adding it puts a margin on the left for me. Floating is usually a good option for getting text to wrap around an element, though.

1 Like
3

Ah the old cut-n-paste monster attacks again! My bad. Thanks Ralph. Tell me, do you think it would be better for me to left-align the text? I’ve never done one of these wrapped projects before and it just seemed to me that it looks ‘neater’ having it snap to the left of the table. Then the rest of the page will be left aligned. Aesthetically I mean. :smiley_cat:

-semi

4

I’m not exactly sure what you’re describing, but it’s always nice to have something a bit different, I guess, although my eye wants that text aligned to the left. :stuck_out_tongue:

I’m not sure if this is just a proof of concept layout at this stage, but if it’s an overall page design, I’d look at making it responsive from the get-go. (That is, don’t set a fixed width on the content area, as it’s overflowing for me in CodePen. Best to keep everything (even demos) as fluid as possible, so you can get a real sense of how a layout like this will behave in the wild. :slight_smile:

1 Like
5

@semicodin you’ve been a member long enough to know that you need to format your code. I have done it for you this time, but please don’t expect mods to do it for you every time. :slight_smile: