J2913 Posted August 13, 2015 Share Posted August 13, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted August 13, 2015 Share Posted August 13, 2015 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 More sharing options...
J2913 Posted August 13, 2015 Author Share Posted August 13, 2015 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now