DIVs don't line up - html

Question

I have created a jsfiddle for you to see what I'm doing.
https://jsfiddle.net/pksml/3mp1Lnw8/5/
#page-wrapper {
margin-left: 205px;
background-color: green;
}
The menu wrapper (orange) and the page wrapper (green) should both be at the top of the content wrapper (blue). But the green block looks to have a top margin (which it doesn't).
My question is this: why don't the orange and green blocks both line up at the top of the blue block?
Is some of my CSS code wrong? Thanks for your input!

Answer 1

It is the default margin of p tag which is pushing the green div down.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
float: left;
}
#page-wrapper {
margin-left: 205px;
background-color: green;
}
p{
margin: 0 0 20px;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum,
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->

Answer 2

You need to float both menu-wrapper and page-wrapper.
Looks like from your addition of the right margin you are trying to position the left menu? If so you could do something like this: https://jsfiddle.net/jgoley/98abyyp2/

Answer 3

jsfiddle
#page-wrapper {
float:left;
background-color: green;
}
use float:left instead of marigin left

Answer 4

I think the code below should work for you!
All I added was display: inline-block; to #menu-wrapper and #page-wrapper.
All I removed was the float: left; from #menu-wrapper and margin-left: 205; from #page-wrapper.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
display: inline-block;
}
#page-wrapper {
background-color: green;
display: inline-block;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->
Hope that helped!

Answer 5

you have two solutions,
you can set the display property of the #page-wrapper to be
display:inline-block
if you don't want to change its display property for any reason so
you can add float:left to the #page-wrapper as well
then no need for margin-left:205px in #page-wrapper

Answer 6

http://codepen.io/craigiswayne/pen/mPxJqv
** Makes use of flex box **
CSS:
.block{
width:100px;
height:100px;
background-color:#8BC34A;
}
.block.fill{
background-color:#F44336;
-webkit-flex: 1;
flex: 1;
}
.container {
display: -webkit-flex;
display: flex;
width:100%;
}