HTML single page layout This is a single page HTML/CSS layout. This is my first ever code and I know it's not perfect, but I would love for someone with a lot more experience to let me know of my mishaps.



&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href="dereke.css"/&gt;
    &lt;title&gt;

    &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="Header"&gt;
        &lt;p&gt;Ohio State Buckeyes&lt;/p&gt;
        &lt;div id="logo"&gt;
            &lt;img src="http://vignette2.wikia.nocookie.net/logopedia/images/6/6f/1000px-Ohio_State_Buckeyes_logo_svg.png/revision/latest?cb=20130425230958" /&gt;
        &lt;/div&gt;
        &lt;div id="navbar"&gt;
            &lt;ul&gt;
                &lt;li&gt;Home&lt;/li&gt;
                &lt;li id="noUD"&gt;|&lt;/li&gt;
                &lt;li&gt;About Us&lt;/li&gt;
                &lt;li id="noUD"&gt;|&lt;/li&gt;
                &lt;li&gt;Contact Us&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="leftbody"&gt;
            &lt;img src="http://printableteamschedules.com/images/collegefootball/ohiostatebuckeyesfootballschedule.gif" /&gt;
        &lt;/div&gt;
        &lt;div id="rightbody"&gt;&lt;/div&gt;
    &lt;div id="lowerbody"&gt;
            &lt;img src="http://grfx.cstv.com/schools/osu/graphics/facilities/stadium-night-800x325.jpg" /&gt;
        &lt;/div&gt;

    &lt;div class="footer"&gt;
         &lt;p id="footword"&gt;Ohio State is the best college in the United States! 2016&lt;/p&gt;
    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;


CSS



.Header {
    width: calc(100%-16px);
    height: 150px;
    border-radius: 5px;
}
.Header p {
    color: white;
    margin-top: -5px;
    width: 600px;
    font-size: 70px;
}
.MidBody {
    background-color: #141414;
    width: 100%;
    height: 850px;
    margin-top: 10px;
    border-radius: 5px;
    position: relative;
    display:block;

}
.footer {
    bottom: 0;
    height:50px;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
    clear:both;
    position:relative;
    text-align:center;
    color: white;
}
#leftbody {
    width: 49%;
    height: 425px;
    left: 0;
    margin-top: 3px;
    margin-left: 3px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    float:left;
}
#leftbody img {
    width: 490px;
    height: 420px;
    border-radius: 5px;
    margin-top: 2px;
    margin-left: 2px;
}
#rightbody {
    background-color: #F1F1F1;
    width: 49%;
    height: 425px;
    margin-top: 3px;
    margin-right: 3px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    float:right;
}
#lowerbody {
    width: 100%;
    height:auto;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    postion: relative;
    display: inline-block;
    text-align:center;
}
#lowerbody img {
    position:relative;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}
body {
    background-color: black;
}
li {
    display: inline;
    padding: 1px;
    text-decoration: underline;
}
#navbar {
    width: 350px;
    color: #F8F8F2;
    font-family: Arial Black;
    margin: -35px;
    text-align: left;
    line-height: 10px;
}
#noUD {
    text-decoration: none;
}
#logo img {
    margin-top: -150px;
    margin-right: 50px;
    width: 15%;
    height: 15%;
    float: right;
}
You have some repeat id tags which aren't good. Using class names instead is much better.

&lt;ul&gt;
   &lt;li&gt;Home&lt;/li&gt;
   &lt;li class="noUD"&gt;|&lt;/li&gt;
   &lt;li&gt;About Us&lt;/li&gt;
   &lt;li class="noUD"&gt;|&lt;/li&gt;
   &lt;li&gt;Contact Us&lt;/li&gt;
&lt;/ul&gt;


And in the CSS it becomes:

.noUD {
  text-decoration: none;
}


You also have standard HTML elements for headers, footers, navigations, and articles:


&lt;div class="Header"&gt; becomes &lt;header&gt;
&lt;div class="Footer"&gt; becomes &lt;footer&gt;
&lt;div id="navbar"&gt; becomes &lt;nav&gt;


You are still able to keep classes and ids with this. It just adds extra readability for systems (and humans) and it makes it better in case your CSS fails because browsers apply their own styling to some standard elements.



position: relative; bottom: 0 does nothing in terms of positioning because it sets the element 0 up from where it was before.

Other than that the code looks pretty good.