HTML/CSS float: left; is not working properly - html

Question

I'm currently reading Headfirst CSS/HTML and I'm having an issue with an example.
I'm attempting to float the body to the left of the sidebar using float:left; however it's not floating properly. I've been over the HTML and CSS an I can't quite see what's wrong.
This is what I want it to look like:
And the fiddle: https://jsfiddle.net/Taubin/7Lhz4wtd/
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 420px;
float: left;
}
<div id="allcontent">
<div id="header">
</div>
<div id="sidebar">
<p class="beanheading">
Sidebar text
</p>
<p>
Sidebar text
</p>
</div>
<div id="main">
<h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
<p>
Main text
</p>
</div>
</div>
Any suggestions would be greatly appreciated.

Answer 1

First, it might be the issue that you are adding margin and paddings, which add size to the box even though the box has a width of 420px, you have to calculate margins and paddings to, or use * { box-sizing: border-box; }, which will calculate the width of that element as a sum of all the sizes (padding, margin, width) and not exceed the width.
Second, the order of the elements are important when floating, put main always on top of the sidebar, since elements start as top to bottom, when you float a top element, the bottom element if its wider, will collapse and align with the main box.
Screenshot for reference:

Answer 2

Here is the https://jsfiddle.net/bg2v0dqn/.
You shouldn't add a large gap with margin.
Here's what I changed:
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 420px;
float: left;
}
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 0;
width: 290px;
float: right;
}

Answer 3

#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 0px;
float: right;
width: 290px;
}

Answer 4

Try this CSS code
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
display: table;
}
#header {
background-color: #675c47;
margin: 10px;
height: 108px;
}
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 420px;
display: table-cell;
}
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 300px;
display: table-cell;
float: right;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
.slogan { color: #954b4b; }
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}