What is causing my button to get pushed down? - html

Question

I know I could fix this with relative positioning, but I'm more wanting to know the why behind my button getting pushed down when I give height to .toggle. I figured out that giving absolute positioning to #menu made it so I could give top margin to .toggle, but when I gave it a height, the button got pushed down. When I changed the height on the button, it changed the vertical height of the button itself. When I tried line-height, again, the button itself changed size.
What is causing the button to get pushed down, and how would I fix this outside of using relative positioning, or switching to in-line block instead of using floats? (I gave .toggle a background-color of blue so I could visualize what was pushing down the button)
http://jsfiddle.net/7rj67454/
HTML:
<div id="menu">
<div id="logo">Codeplayer</div>
<ul class="toggle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
<button>Run</button>
</div>
CSS:
/* ----------- UNIVERSAL -----------*/
a, body, html, ul, li, div {
margin: 0;
padding: 0;
list-style: none;
font-family: helvetica;
}
#logo, .toggle {
line-height: 50px;
}
/* ----------- MENU BAR -----------*/
#menu {
background-color: #EDEBED;
width: 100%;
height: 50px;
box-shadow: 1px 1px 1px #000000;
position: absolute;
}
/* ----------- LOGO -----------*/
#logo {
float: left;
font-weight: bold;
margin-left: 15px;
font-size: 20px;
height: 20px;
}
/* ----------- TOGGLE BAR -----------*/
.toggle li {
list-style: none;
float: left;
margin-left: 20px;
}
.toggle {
margin: 0 auto;
width: 250px;
background-color: blue;
height: 30px;
margin-top: 10px;
}
/* ----------- BUTTON -----------*/
button {
float: right;
margin-right: 15px;
}

Answer 1

This is happening because the li elements in your ul are floated. When you float an element it takes it out of the normal document flow. As far as a containing element is concerned a floated child element doesn't take up any space within it, so it collapses.
The only reason that the Run button isn't sitting all the way at the top of the page is because .toggle has margin-top: 10px; and is taking up the full width of .menu. Try removing margin-top and you'll see Run move up.
The Run button is sitting under your .toggle ul because .toggle is taking up the full width of the shared parent.
This is how your elements are currently laid out:
#######################################
# .toggle #
#######################################
# Run #
#######
By adding height to you .toggle you're simply pushing and element that is already below it further down.

Answer 2

http://jsfiddle.net/7rj67454/1/
If that's what you're looking for then it's because you're confusing or having a hard time grasping the concept of float, position: absolute, and inline-block.
You'd essentially want to avoid position absolute in your case as you don't really need to take anything out of the normal flow.
You want to display things as inline-blocks rather than their default block style because you want to put things inline.
Floating them to the left can achieve the same as inline-block styling but it wasn't meant to be used for what you're aiming for.
Here's a quote from the following page:
Advantages of using display:inline-block vs float:left in CSS
Inline Block
The only drawback to the display: inline-block approach is that in IE7
and below an element can only be displayed inline-block if it was
already inline by default. What this means is that instead of using a
<div> element you have to use a <span> element. It's not really a huge
drawback at all because semantically a is for dividing the page
while a is just for covering a span of a page, so there's not a
huge semantic difference. A huge benefit of display:inline-block is
that when other developers are maintaining your code at a later point,
it is much more obvious what display:inline-block and text-align:right
is trying to accomplish than a float:left or float:right statement. My
favorite benefit of the inline-block approach is that it's easy to use
vertical-align: middle, line-height and text-align: center to
perfectly center the elements, in a way that is intuitive. I found a
great blog post on how to implement cross-browser inline-block, on the
Mozilla blog. Here is the browser compatibility.
Float
The reason that using the float method is not suited for layout of
your page is because the float CSS property was originally intended
only to have text wrap around an image (magazine style) and is, by
design, not best suited for general page layout purposes. When
changing floated elements later, sometimes you will have positioning
issues because they are not in the page flow. Another disadvantage is
that it generally requires a clearfix otherwise it may break aspects
of the page. The clearfix requires adding an element after the floated
elements to stop their parent from collapsing around them which
crosses the semantic line between separating style from content and is
thus an anti-pattern in web development.

Answer 3

use display: table;
/* ----------- UNIVERSAL -----------*/
a, body, html, ul, li, div {
margin: 0;
padding: 0;
list-style: none;
font-family: helvetica;
}
.toggle {
line-height: 50px;
}
/* ----------- MENU BAR -----------*/
#menu {
background-color: #EDEBED;
width: 100%;
height: 50px;
box-shadow: 1px 1px 1px #000000;
display: table;
}
#menu .item{
display: table-cell;
vertical-align: middle;
width: 25%;
}
#menu .item-center{
width: 50%;
}
#menu .item-right{
text-align: right;
}
/* ----------- LOGO -----------*/
#logo {
font-weight: bold;
margin-left: 15px;
font-size: 20px;
height: 20px;
}
/* ----------- TOGGLE BAR -----------*/
.toggle li {
list-style: none;
display: inline-block;
margin-left: 20px;
}
.toggle {
margin: 0 auto;
width: 250px;
background-color: blue; /* I added this to show what's causing run to push down */
}
/* ----------- BUTTON -----------*/
button {
margin-right: 15px;
}
<div id="menu">
<div class="item item-left">
<div id="logo">Codeplayer</div>
</div>
<div class="item item-center">
<ul class="toggle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
</div>
<div class="item item-right">
<button>Run</button>
</div>
</div>

Answer 4

Figured it out: I switched the placement of the .toggle and "run" button in my html so that the logo was first, then the run button, then the toggle. This way, when I floated the button and put top margin on .toggle, it wasn't pushed down.