Margin between Footer and Left/Right column?


#1



https://www.codecademy.com/courses/web-beginner-en-9x6JW-WnAFv/0/2?curriculum_id=50579fb998b470000202dc8b


I have the header and the right/left column where I want them, but the top of my footer is to close to the bottom of the left/right columns.. How do I put a margin between them? I recall learning about this, but I must have done something wrong with my code.. Thank you in advance for your help!

#header{
    height:100px;
    border:3px solid #7ac5cd;
    border-radius:5px;
    position:static;
    background-color:#7ac5cd;
    margin:center;
    float:top;
}
.left{
    height:1000px;
    width:200px;
    border:3px solid #e9edf0;
    border-radius:5px;
    background-color:#e9edf0;
    margin-top:10px;
    position:absolute;
}
.right{
    height:1000px;
    width:200px;
    border:3px solid #e9edf0;
    border-radius:5px;
    background-color:#e9edf0;
    margin-top:10px;
    float:right;
}
#footer{
    height:100px;
    border:3px solid #5bcfbb;
    border-radius:5px;
    background-color:#5bcfbb;
    float:bottom;
    clear:both;
    position:relative;
    margin-top:100px;
}


#2

You can set .left and .right margin-bottom to 10px. That should do it.


#3

Yes!! It worked! Thank you so much! If you don't mind, would you please explain how that worked? Like, why would setting the margin-bottom to 10px separate the columns and the footer?


#4

Well, you are setting 10 pixels of margin at the bottom of the .left / .right divs.

Remember how margin works. Margin is the spacing between content.

( Sorry, I kind of suck at explaining stuff. :disappointed: )


#5

Oooh. That's right. I think you explained it perfectly!! Thank you so much!! I understand it now.. :grinning:


#6

Well, thanks. :confused:

Don't forget to save my answer as the solution.


#7

I think, some things went wrong... margin: center; is not define,you should use margin: 0 auto; set center in horizontal and margin:auto; for each side center

and float:top or bottom is not good. i dont remember these are define or not, but if define, my proffer is , "dont use this".

and other is you should be carefull when use position attribute, or float.

and other proffer is " use other color for see changes better "

test and see this codes:
part of HTML CODE:

	    <div id="header"></div>
	    <div class="clear">
	        <div class="left"></div>
	        <div class="right"></div>
	    </div>
	    <div id="footer"></div>
	</body>

CSS CODE:

#header{
    height:100px;
    width:100%;
    border:3px solid #7ac5cd;
    border-radius:5px;
    background-color:#7ac5cd;
    margin-top:15px;
    clear:both;
    float:left;
}
.clear{
    width:100%;
    float:left;
    clear:both;
}
.left{
    height:1000px;
    width:200px;
    border:3px solid #e9edf0;
    border-radius:5px;
    background-color:green;
    margin-top:100px;
    float: left
}
.right{
    height:1000px;
    width:200px;
    border:3px solid #e9edf0;
    border-radius:5px;
    background-color:red;
    margin-top:100px;
    float: right
}
#footer{
    height:100px;
    width:100%;
    border:3px solid #5bcfbb;
    border-radius:5px;
    background-color:#5bcfbb;
    clear:both;
    margin-top:100px;
    float:left;
}

remember clear, float, width and small divs into a bigger div.

i say this, that i think, you get other problems into responsive design and you want come greater designer.

excuse me, my english is not good.:wink:

good job


#8

What does the 0 in front of "auto" do? How does it differ from "margin:auto"?
Thank you for the tip.. >< I was having a bit of trouble with position and float, so I guess I'll have to look more into it. I think your English is pretty good! :slight_smile:


#9

Already have. Thank you again!!:grinning:


#10

this is a css properties.
margin: 10px 5px 7px 2px; mean...
set margines 10px of top, 5px of right, 7px of bottom 2px of left
such as clock spin: top, right, bottom, left
if you use 2 properties such as:
margin: 10px 5px; means...
set margines 10px from top and bottom, 5px from left and right(in front of them)
and one properties such as:
margin: 10px; means...
set margines 10px from all of sides. top 10, bottom 10, right 10, left 10.

**** now ****
margin: 0 auto; means...
from top and bottom set margin 0px , and from right and left set margin auto that cause get center position in horizontal. if you want set equal margines to top and bottom of object can change 0 to another with "px"
for example: 10px auto;

this properties is equal by "10px auto 10px auto"
thats mean you can write this and work on more details:wink:


#11