So I have the HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Solomon Wise</title>
<style = text/css>
body {
background-color: #F5F5DC;
}
.body {
font-family: Futura, Geneva, sans-serif;
width: 300px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
position: fixed;
top: 50px;
left: 50px;
background-color: White;
}
.javascript {
font-family: Futura, Geneva, sans-serif;
width: 300px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
position: fixed;
top: 50px;
left: 500px;
background-color: White;
}
.HTMLCSS {
font-family: Futura, Geneva, sans-serif;
width: 300px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
position: fixed;
background-color: White;
top: 300px;
left: 500px;
}
.Python {
font-family: Futura, Geneva, sans-serif;
width: 300px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
position: fixed;
background-color: White;
top: 500px;
left: 500px;
}
p {
color: #747E80;
}
a:link {
color:DarkBlue;
}
a:visited {
color:Black;
}
a:hover {
color:DarkCyan;
}
</style>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</head>
<body>
<div class = 'body'>
<h1>Solomon Wise</h1>
<nav>
<p class = 'one'>Hi, I'm Solomon, I'm 13 years old and I live in NYC. I love music, coding, sports, and minimalism.</p>
<a href = "http://pastebin.com/u/slmnwise">Pastebin</a></br>
<a href = "http://turntablestars.com/profile/Bill">TTStars Profile</a>
</nav>
<a href="https://twitter.com/slmnwise" class="twitter-follow-button" data-show-count="false"><img src = 'http://aux.iconpedia.net/uploads/1161475967.png'></a>
<a href="http://www.facebook.com/SolomonIsGreat.net"><img src = "http://whatnowatlanta.com/wp-content/themes/canvas/images/ico-social-facebook.png"</a>
<a href="http://www.goodreads.com/user/show/7658526-solomon-wise"><img src = "http://4.bp.blogspot.com/-NtFTy_OM9oU/TsaFQylMW-I/AAAAAAAAE2s/XwdLy3eiBbk/s1600/goodreads-button-much-rounder-corners-600x600.jpg" height = "32" width = "32"></a>
<a href="http://stackoverflow.com/users/1207787/solomon-wise"><img src = "http://alindeman.github.com/images/stackoverflow_32.png"></a></br>
</div>
<div class = 'javascript'>
<h3>Javascript</h3>
<p class = 'two'>I can make small web applications in Javascript, along with adding dynamic features and functionality to a website in Javascript, such as adding a twitter mashup or an RSS feed.</p>
</div>
<div class = 'HTMLCSS'>
<h3>HTML and CSS</h3>
<p class = 'three'>I can design snazzy looking websites in HTML and CSS, just contact me to request one and we can work something out!</p>
</div>
<div class = 'Python'>
<h3>Python</h3>
<p class = 'four'>I can write applications and small games in Python, I have a good bit of experience in the language and work with it a lot</p>
</div>
</div>
</body>
</html>
and the website looks perfectly fine, except for one thing. The bottom of the Python box is cut off, and I can’t scroll down to view the rest of the page! How do i fix this?
change
position: fixed;toposition: absolute;on all those “boxes”…position fixed means the element doesn’t interact with the viewport the same way other ones do so they don’t affect the scrolling of the page…
hope this helps -ck