Positioning and then making it responsive - html

Question

Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far:
body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;
}
#page-wrap{
width: 950px;
margin: 0 auto;
}
#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;
}
#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;
}
h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}
h1{
position: absolute;
left: 0;
bottom: 0;
}
p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;
width: 450px;
height: 100%;
}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
h3{
background-color: #ffa1ff;
color:white;
text-align: left;
font-size: 20px;
padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;
}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;
}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;
}
div{
height: 287;
width: 198;
}
mock up for what it will look like

Answer 1

Inside of #containerIntro h1, you don't need to add position: static due to that being already set by default. Plus if an element is static, direction properties such as bottom, top, left, and right are completely ignored.
Try to use the property called clear and set it to both...
p {
clear: both;/*Element should have no other elements on the left and right side*/
}
clear:both; gets rid of floating objects on both the left and right sides of an element. I hope this helps!