Why won't my divs all align horizontally? - html

Question

The first two align perfectly, but the third one just won't. .. Can anyone here tell me what i'm doing wrong? I was stuck at this for hours last night, and this morning, by looking at other similar questions here, I was able to get the first two divs to align, but the third one won't no matter what. There is an entirely different div below it that it keeps going inside of instead of going up to align itself with the other two.
HTML & CSS
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
float: left;
width: 300px;
height: 300px;
background-color: white;
margin-left: 40px;
margin-right: 5px;
}
.frame2 {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: white;
}
.frame3 {
width: 30%;
height: 300px;
background-color: white;
margin-left: 5px;
margin-right: 40px;
float: right;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>

Answer 1

First. Set them all to float left, so the will try to pack left until they fill the page width.
If you set some of the widths percentually and other in absolute numbers, your design wont work for all screen sizes. You'll have to do a lot of math. I suggest you use all widths percentual, so they will behave in all screens.
In your case, they would align to the top only in screens where the width of all elements together isn't greater than the width of the screen.
I changed the background colors so we could see better.
obs: If you know the min screen size this has to work, you can use absolute numbers. You'll have to make the divs with their margins fit on the smallest considered screen size.
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
background-color: yellow;
float: left;
width: 33%;
height: 300px;
// margin-left: 40px;
// margin-right: 5px;
}
.frame2 {
background-color: blue;
float: left;
margin: 0 auto;
width: 33%;
height: 300px;
}
.frame3 {
background-color: green;
width: 33%;
height: 300px;
// margin-left: 5px;
// margin-right: 40px;
float: left;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>