0

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;  

    }
mellamojoe
  • 43
  • 7

4 Answers4

1

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.

Community
  • 1
  • 1
chdltest
  • 853
  • 2
  • 6
  • 18
  • There are issues with `inline-block` like descender spacing and single spaces between elements. – hungerstar May 20 '15 at 22:00
  • `What this means is that instead of using a element you have to use a element.` ?? – royhowie May 20 '15 at 22:10
  • Ohhhhh, I see where it went wrong, there was a code that disappeared. Fixed now, and thanks for the catch. – chdltest May 20 '15 at 22:15
  • The reason I used float is because my instructor instructed us to use floats to pull this off. I know how to do it with inline-block, but was curious if I used floats like he told me, how I'd pull that off. – mellamojoe May 20 '15 at 22:54
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.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • Thank you. This clearly explains why it's happening. So, is there any way to make this work outside of using inline-block? Or will the fact I'm using float left and float right guarantee this result? – mellamojoe May 20 '15 at 22:56
  • It all depends on requirements and context of your project. But in general you might want to but each item in the menu bar in its own container. From there you could [float each container to the left](http://jsfiddle.net/hfan70jw/1/) and set a percentage width, or have a [mix of widths](http://jsfiddle.net/hfan70jw/) and use [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) if needed. There are other ways, do some homework along with some trial-and-error and you'll get there. – hungerstar May 21 '15 at 13:44
0

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>
Dmitriy
  • 4,475
  • 3
  • 29
  • 37
  • OP was asking why the **Run** button was moving when adding `height` to `.toggle`, not how to fix it. But cheers for providing a solution. – hungerstar May 20 '15 at 21:58
0

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.

mellamojoe
  • 43
  • 7