Why won't my floated right div sit next to my floated left div?

Language Help CSS
1

I can’t figure out where I’m going wrong. I want my floated right div (the bigger div as seen in the example) to sit next to the floated left div (the narrow div as seen in the example) but I am unsure how to do it. I have referred back to the CSS given in the example and I still can’t figure it out. Also, when I fixed my header, the next div sat directly behind it and was not visible unless I scrolled down. I fixed this by giving the hidden div a margin-top but was that necessary or was something wrong with my code to begin with? Here is my HTML and CSS for the main issue:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Resume</title>
	</head>
	<body>
	
	<div id="header">
	<p id="name">Amy Williams</p>
	<a href="mailto:[email protected]"><p id="email">[email protected]</p></a>
	</div>
	
	<div class="left">
	</div>
	
	<div class="right">
	</div>
	
	<div id="footer">
	</div>
	
	</body>
</html>

CSS:

* {
    font-family: Helvetica-light;
}

div {
border-radius: 5px;
height: 70px;
width: 90%;
margin: 10px;
background-color: #CCEEEE;
}

#header {
    z-index: 1;
    position: fixed;
}

#name {
    float: left;
    margin-left: 10px;
    color: #363434;
}

#email {
    float: right;
    margin-right: 10px;
    color: #FFFFFF;
}

.left {
    float: left;
    margin-top: 90px;
    position: relative;
    width: 10%;
    height: 400px;
    margin-bottom: 10px;
}

.right {
    position: relative;
    float: right;
    margin-top: 40px
    width: 88%;
    height: 400px;
    margin-bottom: 10px;
}

#footer {
    clear: both;
}
2

Because there isn’t enough space, your body has a margin (by default, you might want to remove it with body { margin: 0; }), your .left and .right also have a margin (you defined it in div css selector), all this margin doesn’t leave enough room for you floats to float beside each other. Suggested fix? Depends on what you want. You could remove the margins, or make the the two divs smaller

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

3

Thank you! I made the divs smaller. I now have another problem which I hope you can help me with. I have attached a screen shot (hopefully it works) I need to close the gap, the white space, between .left and .right. I will paste the code below and hopefully it will be visible this time!

2818×1240 82.8 KB 

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Resume</title>
	</head>
	<body>
	
	<div id="header">
	<p id="name">Amy Williams</p>
	<a href="mailto:[email protected]"><p id="email">[email protected]</p></a>
	</div>
	
	<div class="left">
	</div>
	
	<div class="right">
	<h1>Objective</h1>
	<p>To become the most successful web designer of all time!</p>
	<h1>Skills</h1>
	<p>I am currently studying on codeacademy and will be confident in the following languages in the near future. 
	<ul>
	<li>HTML & CSS</li>
	<li>Javascript & jQuery</li>
	<li>PHP</li>
	<li>My SQL</li>
	</ul>
	<h1>Education</h1>
	<ul>
	<li>Primary School</li>
	<li>High School</li>
	<li>College</li>
	<li>Online courses with codeacademy</li>
	<li>Self studying</li>
	</div>
	
	<div id="footer">
	<p class="address">123 Developer Close</p>
	<p class="address">London</p>
	<p class="address">United Kingdom</p>
	<p class="address">080011223344</p>
	</div>
	
	</body>
</html>


div {
    border-radius: 5px;
    height: 70px;
    width: 90%;
    margin: 10px;
    background-color: #CCEEEE;
}

#header {
    position: fixed;
    z-index: 1;
    background-color: #CCCCCC;
    width: 97.5%;
    margin-top: -8px;
}   

#name {
    float: left;
    margin-left: 10px;
    color: #363434;
}

#email {
    float: right;
    margin-right: 10px;
    color: #FFFFFF;
}

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

.right {
    position: relative;
    float: right;
    width: 82%;
    height: 400px;
    margin-top: 70px;
}

#footer {
    clear: both;
    width: auto;
}

* {
    font-family: Helvetica-light;
}

h1 {
    font-size: 14px;
}

.right p {
    font-size: 12px;
}

.right h1 {
    font-size: 12px;
}

ul {
    font-size: 12px;
}

.address {
    font-size: 10px;
    margin: -3px;
    text-align: center;
    padding-top: 5px;
}
4

I will look into it, but first, & is a special charact in html, if you use it in a webpage, better use its entity (&amp;), you can find a list here

5

right, i put your code in a bin, i removed body’s margin by adding:

body {
  margin: 0;
}

to your css document. Then i removed margin: 10px; from your div css selector, and margin-top: -8px from your #header, since body’s margin is gone, this is no longer needed. Then i changed the width of your left to 10%, and of your right to 90%. I added box-sizing: border-box to your div css selector, just to be sure. This will make border and padding part of the width and height of your element, rather then expanding it. I believe, that was it.