Float Problem with DIVS [SOLVED]

[J2913]

I have the following 4 divs: top, left, right, bottom.

I used (float:left;) on all of them, but was suggested that I should learn float properly and that only the (left and right) should only need the float.

So, I (float:left;) only the left and right, and added a (clear:both;) on the (bottom).

 

Problem: My problem is that when I do this, I am left with about 1px at the bottom of the screen that is only the background. White the 1px divider between the left+right and the bottom disappears.

 

Whereas, when I placed the (float:left;) on the (left, right, and bottom) with no (clear:both;) it would result in the desired layout in which there is no 1px of the background at the bottom of the page, and the 1px divider is present between the left+right and bottom div.

 

I tried editing the CSS, and I do not know what seems to be the problem. Look at the bottom of the attach photo for what I meant.

However, I find that if I decrease the left div by 1px in height the result is in the picture. But if I decrease the right div by 1px, to match the left, it results in the disappearance of the divider.

 

I know that makes sense that it would disappear, BUT what happened to the (margin-top: 1px:) on the bottom div that is suppose to be the divider?

 

Here is the CSS

html {   background: url(Autumn.jpg) no-repeat center center fixed;} body { margin: 0px;border: 0px;padding: 0px;} .container {   background-color: red;   width: 1000px;  height: 956px;  margin: 0 auto;} .top {  width: 100%;  height: 18px;  line-height: 18px;  margin-bottom: 1px;     background-color:rgba(255,255,255,0.8);   font-size:18px;  text-align: center; } .left {  width: 275px;  height: 921px;  margin-right: 1px;   background-color:rgba(255,255,255,0.8);  float: left;} .right {  width: 704px;  height: 922px;   background-color:rgba(255,255,255,0.8);  float: left;   padding-right: 10px;  padding-left: 10px;   overflow:scroll;} .bottom {  width: 100%;  height: 15px;  line-height: 15px;   margin-top: 1px;     background-color:rgba(255,255,255,0.8);   font-size: 15px;  text-align: center;   clear:both;}

Edited August 13, 2015 by J2913

[davej]

Why do .right and .left have different heights?

 

I think the problem you are describing is due to the fact that the floated divs are out of the normal flow so the margin-top on the bottom div won't work. Instead you can add margin-bottom to the .right and .left divs. This is just part of getting used to the peculiarity of float.

[J2913]

The margin .left & .right worked! Thanks!

 

The different height for .left and .right was only for example to show what I was expecting to result in this problem; the divider.

Thanks davej!