Jump to content

Float Problem with DIVS [SOLVED]


Recommended Posts

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 by J2913
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...