Divs相互调整大小（HTML CSS）

Question

I'm currently doing a project for university where I have to make a simple website using css/html. I'm trying to resize one of my pages but when I do the various elements (Photo,Table and Box with text) all sit on top of each other instead of moving below each other like they do on all of my my other pages.

HTML(Relative to the sections playing up):

    <aside id="Name">
    <h3>Michael Freeman </h3>
    </aside>


    <aside id="Photo">
    <img src="images/me.jpg" alt="Picture of me" /> 
    </aside>

    <section id="Table">
    <table>
    <caption>My Timetable</caption>
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday </th>
        <th>Thursday</th>
        <th>Friday</th>
    </tr>
    <tr>
        <td>8:30</td>
        <td class="emptydata"></td>
        <td>Database Analysis and design</td>
        <td class="emptydata"></td>
        <td>Introduction to .net programming</td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>10:30</td>
        <td>Internet Technologies((lab))</td>
        <td>Database Analysis and design((lab))</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>   
        <tr>
        <td>12:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td>Internet Technologies</td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>2:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>4:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>5:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td>Introduction to programming.net</td> 
        <td class="emptydata"></td>
    </tr>
    </table>



    </section>
</article> 

And the css:

Table{
height:4%;
Width:8%;
Color:#080000;
Margin-right:auto;
Margin:auto;
Text-align:center;
Margin-bottom:10%;
Margin-left:auto
}
tr{
border: 2px solid #080000;
}
td
{border:2px solid #080000;
background-color:rgb(255,255,255);
}
td.emptydata
{
background:#080000;
}
.emptydata:hover
{
background: red;
}
#Name
{Background-image:url(Images/Back.jpg);
text-align:right;
float:right;
margin-right:auto;
margin-left:auto;
Margin-top:5%;
Border: 3px Solid #080000;
Font-size:150%;
Padding:1%;}
#Photo
{height: 4%;
Width:10%;
Float:left;
Padding-right:10%;
Margin-left:auto;
Margin:auto;
Border: 10px groove black;}

Any help will be appreciated!

Answer 1

Hey Kaleon is something like this Fiddle you want?

I used display:inline-block;

take a look and tell me if it helps you.

I cleaned your code. Be aware to capitals in your CSS.

EDIT

as requested here is updated fiddle with code : Fiddle