Adjustable divs and positioning - html

Question

Hi I've written some code where I have create two divs wrapped inside another div. I have then create a league table and floated it to the right hand side. I have made the 2 divs on the left hand side small enough for the league to go alongside them however it doesn't seem to move upwards it stay in it position below the 2 divs. Also when I would like my 2 divs on the left hand side to adjust to whatever is inside my them. At the moment if I have one line inside the div its height is still fitted for 10 lines.
Should I use flex box for this? Any help would be much appreciated
`
<li id="et"> England
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li id="et"> France
<ul>
<li>Ligue 1
</li>
</ul>
</li>
<li id="et"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li id="et"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li id="et"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
`https://jsfiddle.net/e2cmhrec/

Answer 1

jsFiddle demo
You .wrap has
width:70%;
margin-left:3%;
with some elementary calculation you have remaining: 27%.
But than suddenly you decided to make your right floated #sidebar
width: 30%
Even if you used erratically width:30% than suddenly your table inside the sidebar has:
width:120%;
Don't forget to float:left your .wrap if you want to accomodate your #sidebar to the right float.
Your .wrap has display: table; and you used for the first child display:table-cell. What about the second child?
Also why use float:left on a table-cell element?
To improve your table.grid look'n'feel you might want to use:
border-collapse:collapse;
also where you have yoru injuries and suspension cells, use for the display:table element also:
border-spacing: 16px; /* learn CSS rules */
border-collapse: separate; /* learn CSS rules */
I've also seen a funny thing, you named a class .ArsStand for Arsenal that gives a red border... top and apparently not the bottom one, so you decided to add the same class to the team underneath... No. 1. try not to name classes related to a variable page content. 2. create your special classes after the common element rules (in order to overwrite them.)
Don't add height to tables... one day you might have more data and question why it's all so squished. Rather add vertical padding to your td elements.
You cannot have duplicate ID elements in a single page! id="headinj"