Unable to add space on top of my footer


#1

I am unable to space out my footer from the above 2 left and right div tags. I want to leave some space below my right and left tags.

Here is my HTML Code

<!DOCTYPE html>
<html>


	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	
	
	
	
	<body>
	
	    <div id="header">
	    <p id="name">Yusuf Haider</p>
	    <a href="mailto:yusufht@hotmail.com"><p id="email">yusufht@hotmail.com</p>
	    </div>
	
	    <div class="left">
	    <img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAK1AAAAJDRjZjczZjYyLWEzOGYtNDExZS04OTI2LWI1OTVkM2E2YmVhYg.jpg" />
	    </div>
	
	    <div class="right">
	    <h3>Objective</h3>
	    <p id="objective">To become a HTML / CSS expert</p>
	    
	    <h3>Skills</h3>
	    <li>HTML / CSS</li>
	    <li>Javascript</li>
	    <li>JQuery</li>
	    
	    <h3>Qualifications</h3>
	    <li>High School</li>
	    <li>College</li>
	    <li>Graduate</li>
	    <li>Post Graduate</li>
	    <li>Codecademy</li>
	    
	    </div>
	
    	<div id="footer">
    	    <p>PO Box: 5891,</p>
    	    <p>Dubai - UAE</p>
    	</div>
	
	</body>

</html>

Here is my CSS code

div {
    border-radius: 5px;
    background-color: #B6B6B4;
    box-sizing: border-box;
    height: 60px;
    width: 90%;
}

#header {
    position: fixed;
    width: 100%;
    background-color: #151B54;
}

.left {
    float: left;
    width: 10%;
    height: 500px;
    position: relative;
    margin-top: 70px;
}

.right {
    float: right;
    width: 89%;
    height: 500px;
    position: relative;
    margin-top: 70px;
}
    
#footer {
    clear: both;
    width: 100%;
    height: 80px;
    background-color: #151B54;
    color: white;
    text-align: center;
    padding: 5px;
}

#name {
    float: left;
    font-family: Arial;
    font-size: 25px;
    color: white;
    margin-left: 30px
}

#email {
    float: right;
    font-family: Arial;
    color: white;
    margin-right: 30px;
    margin-top: 30px;
}

p {
    font-color: blue;
    /*padding: 20px;*/
}

li {
    font-color: blue;
    padding: 5px;
    margin-left: 20px;
}

h3 {
    color: black;
    margin-left: 10px;
}

#objective {
    margin-left: 20px;
}

.left img {
    width: 100%;
    height: auto;
}

#2

No code provided, that is a bit of an issue. Well, you are using float so adding margin-top to #footer i guess won't do much, have you tried margin-bottom on left and/or right?

If still not working, post full html + css code


#3

you could add margin to your div or use the old style way line break <br /> (not recommended but its an easy way out)


#4

I have tried margin-top: 10px; - but doesnt work.


#5

paste in your code and we can help you


#6

Well, since (why i am repeating myself) there is no code to look at, there is nothing i can do


#7

I have already edited my post and added both HTML and CSS code. Kindly check.


#8

Edits don't give notifications


#9

I added margin-bottom to .right, and it worked right away. I mentioned this in my first post, i also mentioned adding margin-top to #footer will most likely not work because of floats....


#10

Yes worked. Perfect. Thanks a lot.