Very confused about spacing


#1

it is allowing me to submit but my left div is under my footer. Also why is my left and right div so far apart? AND what is my footer spanning the whole page but my header is not? is it because of the text?

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	<div id="header">
	    <h1> Steve Miller's Resume that looks like a Panther's Website</h3>
	</div>
	<div class="left">
	    <ul>
	        <li>Job 1</li>
	        <li>Job 3</li>
	        <li>Job 4</li>
	        <li>Job 5</li>
	        <li>Job 6</li>
	        <li>Job 7</li>
	        
	
	</div>
	<div class="right">
	    <p>other life experiences</p>
	
	</div>
	<div id="footer"></div>
	</body>
</html>

#header {
    border-radius: 5px;
    border: 2px solid black;
    background-color: #0099FF;
    height:50px;
    position: fixed;
    z-index: 1;
}

.left {
    border-radius: 5px;
    border: 2px solid black;
    width:200px;
    height: 400px;
    background-color: #BCBCBC;
    float: left;
}
.right {
    border-radius: 5px;
    border: 2px solid black;
    width:200px;
    height: 400px; 
    background-color: black;
    float: right;
}

#footer {
    border-radius: 5px;
    border: 2px solid black;
    background-color: #0099FF;
    height:50px;
    clear: both;
}

li {
    font-family: Impact;
}

p {
    color: white;
}

#2

if you edit/update your question, leave a reply so i get a notification. Your html code is not visible, take the following steps to make it visible:


#3

Okay here you go! Thanks!


#4

right, i improved your code. i put it in this bin.


#5

changes made:
removed the margin of body.
added box-sizing: border-box, this way padding and border are part of height and width of div elements
reduced margin-top of h1 so it fits inside #header
i added a div with class container, which i wrapped around left and right so they are not so far apart. The reason they are so far apart is because you use float
i added margin-top to .left and .right so that it is not behind the #header


#7

one more question I have two h3s where I need one to be black like it is and I need the second h3 to be white because of the black background... how could I assign that in the style sheet?

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	<div id="header">
	    <h1> Steve Miller</h3>
	</div>
      <div class="container">
	    <div class="left">
	        <h3>Job Experience</h3>
	            <ul>
	                <li>Job 1</li>
	                <li>Job 3</li>
	                   <li>Job 4</li>
	                <li>Job 5</li>
	                <li>Job 6</li>
	                <li>Job 7</li>
	        
	
	    </div>
	    <div class="right">
	        <h3 style="color: white">Other life experiences</h3>
	        <p>I've been on many mission trips around the world...<p>
	
	    </div>
    </div>
	<div id="footer">I could put phone number/email here...</div>
	</body>
</html>

as you can see right now I am just using a style attribute there...


#8

you want the h3 inside .right to be color white? why do not simple do:

.right h3 {
  color: whire;
}

#9

ah I was wondering if I could do that... Thanks!