Content rendering in tabbed content area - html

Question

Good day all. I'm having an issue getting content to render correctly in one panel of my tabbed content area. It looks fine in my fiddle: http://jsfiddle.net/Del087/9yptj2nj/ however, it is not rendering correctly on my site. If you look here http://www.realtimehockey.net/canlan.html and check out the second tab "Youth Classic" you should see what I mean. Ideally I am trying to get the top two elements to align horizontally with the 3rd element below the two. I'm sure this is a fairly easy fix but, I just can't seem to figure it out. Any help would be greatly appreciated. Thanks.
The CSS
<style> td, tr {
border-style: none
}
A {
text-decoration:none
}
a:link {
color: #0000ff;
}
a:visited {
color: #0000ff:
}
a:hover {
color: #ff6600;
}
</style> <style> .tabs input[type=radio] {
display:none;
text-decoration: none;
}
.tabs {
width: 730px;
height: 1100px;
float: none;
list-style: none;
position: relative;
padding: 0px;
margin-right: 5px;
margin: 5px;
margin-top: 2px;
}
.tabs li {
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
color: #FFFFFF;
font-family: patua one;
font-style: italic;
font-size: 14px;
background: linear-gradient(#151515, #080808);
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #ff6600;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
font-size: 20px;
line-height: 140%;
padding: 5px;
width: 725px;
margin-right: 5px;
position: absolute;
box-sizing: border-box;
border:3px solid #454545;
border-top: 7px solid #454545;
background-color:#080808;
}
[id^=tab]:checked + label {
background: #ff6600;
color: white;
top: 0;
}
[id^=tab]:checked ~[id^=tab-content] {
display: block;
}
</style> <style> #table-wrapper {
position:relative;
}
#table-scroll {
height:965px;
width: auto;
overflow:auto;
margin-top:2px;
}
#table-wrapper table {
width:auto;
}
#table-wrapper table * {
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:auto;
}
</style> <style> .table2 {
margin-top: 10px;
}
</style>
The HTML
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Tournaments</label>
<div id="tab-content1" class="tab-content">
<div id="OrgsAtoD56_5439" align=center x:publishsource="Excel">
<div id="table-wrapper">
<div id="table-scroll">
<iframe frameborder="0" height="630" scrolling="no" src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214256&authkey=ADHo6NDfwBXvj5k&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF36&wdHideGridlines=True" width="695"></iframe>
</div>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Youth Classic</label>
<div id="tab-content2" class="tab-content">
<div id="table-wrapper">
<iframe src="https://scorestream.com/widgets/scoreboards/vert?userWidgetId=1317" style="padding:7px;border:0px;width:350px;height:600px;max-height:600px;" title="Realtime sports scoreboard widget" scrolling="no" frameBorder="0"></iframe>
<table border="3" bordercolor="080808" padding="1px" align="right" class="table2">
<tr>
<td><img src="http://i1314.photobucket.com/albums/t563/RTH13/AdsWebsite/Canlan600200_zpszbaycily.jpg" border="0" alt=" photo Canlan600200_zpszbaycily.jpg"/>
</td>
</tr>
</table>
<br>
<iframe width="664" height="300" style="padding-left:10px;" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214321&authkey=ADVLgs4SS_FHqAY&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AG57&wdHideGridlines=True"></iframe>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Niagara Falls Youth Challenge</label>
<div id="tab-content3" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">King/Rings I</label>
<div id="tab-content4" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab5">
<label for="tab5">King/Rings II</label>
<div id="tab-content5" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab6">
<label for="tab6">CANADA O to Y</label>
<div id="tab-content6" class="tab-content">
<div id="table-wrapper">
<div id="table-scroll"> <img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/>
</div>
</div>
</div>
</li>

Answer 1

Your table on realtimehockey on tab2 is embedded in extra
<div style="overflow:auto">
<table>....</table>
</div>
element (right after first iframe) in table-wrapper. Browser inserts line break before and after div element by the default. Remove this extra div element and it'll work like on jsfiddle. You can apply styl="display: inline;" to this div and it'll also work.