Positioning HTML table so text wraps around - html

Question

Check out my reduced test case on CodePen.
My question: How do I position the table so that it moves south 350px while also ensuring that the paragraph text wraps around seamlessly?
The restriction is that the table elements in the HTML must remain at the top above the first paragraph element and cannot be shifted half way down the web page between the paragraph elements. The table must be above the first paragraph tag.
If I uncomment line 12 (the margin-top property) in the CSS, the table moves south 350px (which is where I need it to be). However the problem then is that the paragraph text to the left doesn't wrap.
How do I position the table so that it is moved down 350px but also ensure text wraps above, to the side and below?
I've already leveraged Chris Coyier's almanac on floats by Sara Cope.
I've been wrestling by using different float values back and forth without reaching where I need to be.
For what it is worth, here is the CSS from my testcase:
body {
width: 1024px;
margin: 1em auto;
}
table {
font-family: arial, sans-serif;
float: right;
/* display: inline-block;*/
margin-right: 100px;
padding: 50px;
/* margin-top: 350px; */
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
border: 1px dashed black;
}
tr:nth-child(even) {
background-color: #dddddd;
}

Answer 1

Although without moving we can't move the table down and wrap the text around it, but there is a magical way through you can do it without moving html's code.
We can achieve your thoughts by inserting a div with an id of hidden as:
<div id="hidden"></div>
And then all the css works begins, As we target hidden div as:
#hidden{
float:left;
clear: both;
width: 0;
height: 300px;
visibility: hidden;}
Thus by making it float to left which is alternate to our current table and by putting width 0 and height of 300px (adjustable as per the needs) having visibility of hidden, So it will be there but not visible but just exists with a height of 300px.
As our table css will be:
#visibletable{
float:right;
clear: both;}
We make our table to float alternate to the hidden div and clear both.
And tada ! we did it !
You can try by yourself by running the code below.
body {
width: 1024px;
margin: 1em auto;
}
#hidden{
float:left;
clear: both;
width: 0;
height: 300px;
visibility: hidden;
}
#visibletable{
float:right;
clear: both;
margin-right: 20px;
padding: 10px;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
border: 1px dashed black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<h3>Heading</h3>
<div id="hidden"></div>
<table id="visibletable">
<tr>
<td colspan="2">Posts Top 10 Word Counts</td>
</tr>
<tr>
<th>Words</th>
<th>Quantity</th>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus sodales dignissim. Nam aliquam ante nec nisl molestie ultrices. Etiam aliquet aliquam bibendum. In hac habitasse platea dictumst. Vivamus condimentum enim sapien, et aliquam sapien aliquam in. Maecenas fringilla ultricies neque at condimentum. Praesent facilisis iaculis velit sit amet euismod.</p>
<p>Vivamus sed felis eu nisl molestie tincidunt eget lobortis ligula. Nam libero felis, placerat sed eleifend vel, elementum non enim. Maecenas sed pulvinar nunc. Maecenas quam orci, dictum quis mattis sed, finibus ultrices tellus. Donec consectetur tristique ante, et volutpat eros semper sodales. Nam ac leo odio. Phasellus ipsum justo, ultricies a dui a, feugiat mattis dui. Vivamus eu tellus ac eros placerat ultricies. Nunc mauris quam, feugiat et faucibus ac, porta ac sapien. Vestibulum vitae lacus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In odio libero, accumsan vitae eros et, ornare sagittis metus. Maecenas nec eros vel nisl ultricies varius vel sit amet mauris. Nullam sollicitudin non tortor et vestibulum.</p>
<p>Ut lacinia diam tincidunt lacus bibendum viverra id sed purus. Aliquam commodo ante sodales, laoreet dui eu, sodales massa. Aenean vitae turpis ante. Praesent id dolor nunc. Morbi id lectus accumsan, pulvinar nisi vitae, rhoncus diam. Cras vestibulum rutrum elit, in placerat arcu condimentum vel. Etiam semper lacinia mi, vel ultrices turpis tristique ut. Etiam scelerisque sagittis nisi, rhoncus faucibus dui pharetra in. Nullam vehicula, orci ut facilisis iaculis, dolor metus faucibus enim, nec ornare metus odio ut lectus. Sed eu gravida eros, varius semper magna. Sed nec sapien quis enim mollis blandit. Nunc scelerisque massa vel quam venenatis, nec bibendum arcu aliquam. Nulla sed scelerisque lacus. In iaculis nunc congue dapibus efficitur.
<p>Pellentesque tempor mattis ante, vitae congue sem vulputate vitae. Praesent semper imperdiet leo vel feugiat. Pellentesque et sodales nunc. Nunc venenatis viverra urna at pellentesque. Sed pulvinar mollis tortor luctus luctus. Nullam blandit at lorem at elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus felis, molestie nec ex id, sollicitudin iaculis sapien. Phasellus egestas, justo et molestie hendrerit, enim odio dignissim sapien, eu vestibulum metus erat ac velit. Nunc vehicula est tellus, nec fermentum mauris dictum nec. Maecenas fringilla porttitor lorem, et pretium enim commodo eget. Vestibulum finibus ornare diam ut lacinia. Nulla at blandit eros.
<p>Cras ornare feugiat mattis. Proin vitae consectetur turpis. Fusce bibendum dui quis tortor semper, non hendrerit nibh fringilla. Sed pulvinar tortor quam, non euismod risus auctor id. Phasellus vulputate neque vitae nisl dapibus, eleifend euismod est hendrerit. Nullam eu placerat turpis. Nam pretium ac lorem quis molestie. Vestibulum ut mi vehicula, euismod justo eu, scelerisque nibh. Cras vel ante ac dolor eleifend molestie. Nullam in ante egestas, aliquam diam eu, sodales nulla. Quisque euismod ante lectus, in vestibulum neque accumsan eu. Proin et eros non felis hendrerit faucibus et vel lectus. Vestibulum vitae dui in sem convallis dignissim ac ac ante.
<p>Donec sollicitudin velit quis justo consectetur fringilla. Pellentesque in neque dignissim, viverra risus et, vehicula lacus. Aliquam at iaculis nibh, sed rutrum ipsum. Donec eget auctor arcu. Sed id ipsum justo. Phasellus tincidunt tempus diam, ac aliquam augue pretium vel. Quisque mattis et metus ut consequat. Nunc quis feugiat sapien. Sed vel quam sed libero iaculis varius.
Thank You #UmarGit