Aligning div elements under each other - html

Question

I am trying to align 3 divs under each other, I believe it is because of the vertical-align I used. I am trying to fix it up for the #media, when its at 480px to align the divs underneath. For some reason I am unable to accomplish this. I have spent about 3 hours trying to do this. Any help/suggestions is much appreciated.
Image:
HTML:
<div class="features">
<div id="features-title">
<p>Features fitted just for your website</p>
<hr>
</div>
<div class="features-body">
<div id="features-body-pages">
<div id="features-body-pages-title">
<p>Your Site</p>
</div>
<div id="features-body-pages-subtitle">
<p>User accessibility.</p>
</div>
<hr>
<div id="features-body-pages-main">
<p>From navigation to user accessibility, we make your website easy for your visitors to navigate around. You don't want your visitors leaving, and neither do we! That's why we make your site appealing.</p>
</div>
</div>
<div id="features-body-support">
<div id="features-body-support-title">
<p>24/7 Support</p>
</div>
<div id="features-body-support-subtitle">
<p>Never hesitate.</p>
</div>
<hr>
<div id="features-body-support-main">
<p>Unlike most places, we actually offer 24/7 support with minimum wait time. Even after your website has been delivered, it's not to late to ask for help. We are always here and glade to help.</p>
</div>
</div>
<div id="features-body-types">
<div id="features-body-types-title">
<p>Types of websites</p>
</div>
<div id="features-body-types-subtitle">
<p>Request any kind of site.</p>
</div>
<hr>
<div id="features-body-types-main">
<p>You name it, we make it! From small personal sites to large company sites. All you need to do is provide us with the website information, and we will do the rest.
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
background-image: url("../images/CrystalDevLogo.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4484CE;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #3a88e3;}
ul.topnav li a.active {background-color: #D9D9D9;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
.cover-image {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
}
.cover-image img {
width: 100%;
height: auto;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: -1;
}
#alert-motd {
text-align: center;
overflow: hidden;
position: relative;
height: 50px;
}
#alert-motd p {
font-size: 18px;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 25s linear infinite;
-webkit-animation: scroll-left 25s linear infinite;
animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
#media all and (max-width: 1690px) {
.body-quote {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
float: right;
margin-right: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
margin: 0 auto;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
}
.features-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
.contact {
background-color: rgba(193, 196, 195, .6);
border-radius: 15px;
text-align: center;
margin-top: 200px !important;
width: 90%;
margin: 0 auto;
}
.contact #contact-header {
border-radius: 10px;
background-color: rgba(80, 140, 205, .9);
width: 90%;
margin: 0 auto;
color: black;
}
.contact #contact-title {
font-size: 50px;
font-style: bold;
text-align: center;
}
.contact #contact-subtitle {
font-size: 22px;
font-style: bold;
}
.contact #contact-info-email {
font-size: 20px;
font-style: bold;
}
.contact #contact-info-phone {
font-size: 20px;
font-style: italic;
font-style: bold;
}
.contact-form {
width: 600px;
margin: 0 auto;
}
}
#media all and (max-width: 1280px) {
.body-quote {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
float: right;
margin-right: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
margin: 0 auto;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
}
.features-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
}
#media all and (max-width: 980px) {
}
#media all and (max-width: 736px) {
.body-quote, .body-help { float: none; margin:auto;}
.features #features-body-types, .features #features-body-support, .features #features-body-pages {
display: inline;
margin: auto;
}
}
#media all and (max-width: 480px) {
.body-quote {
margin: 0 auto;
width: 280px;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
left: 0;
right: 0;
margin: 0 auto;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
text-align: center;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
height: auto;
}
.features-body {
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-pages-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
.contact {
background-color: rgba(193, 196, 195, .6);
border-radius: 15px;
text-align: center;
margin-top: 200px !important;
width: 90%;
margin: 0 auto;
}
.contact #contact-header {
border-radius: 10px;
background-color: rgba(80, 140, 205, .9);
width: 90%;
margin: 0 auto;
color: black;
}
.contact #contact-title {
font-size: 50px;
font-style: bold;
text-align: center;
}
.contact #contact-subtitle {
font-size: 22px;
font-style: bold;
}
.contact #contact-info-email {
font-size: 20px;
font-style: bold;
}
.contact #contact-info-phone {
font-size: 20px;
font-style: italic;
font-style: bold;
}
.contact-form {
width: auto;
margin: 0 auto;
}
}

Answer 1

Just set all of them are float: left and put them inside a container which has enough wide in order to fit them, so that the others will be pushed down.
div id="myDIV">
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</div>
CSS:
#myDIV{
width: 800px;
}
#myDIV div {
float: left;
height: 400px;
width: 400px;
}