How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

Tags: html,css,css3

Problem :

I have a very simple navigation bar with five buttons. Each of them starts with box-shadow: 0px 4px #777777 to give a 3D look, and there is a .navbarright a { display: inline-block } as well to line up all the buttons horizontally. Here is the HTML:

<div class="navbarright">
    <a href="x"><div class="navbutton" id="x"> x </div></a>
    <a href="x"><div class="navbutton" id="x"> x </div></a>
    <a href="x"><div class="navbutton" id="x"> x </div></a>
    <a href="x"><div class="navbutton" id="x"> x </div></a>
    <a href="x"><div class="navbutton" id="x"> x </div></a>

Here is the CSS I am using to attempt to create a button-pressing effect upon hover:

.navbutton:hover {
    margin-top: 4px;
    box-shadow: 0px 0px #777777;

Basically, upon hover, it gets rid of the shadow (which represents the front-facing side of the 3D button) and moves the button down to replace the area where the shadow was, to give the appearance that the button was pressed all the way down. I may change it later so that it only presses down half-way, which is why the #777777 is still part of the box-shadow in .navbutton:hover.

The mechanism works, but the CSS seems to apply "margin-top: 4px" to all of the other navigation buttons too. It does not remove the shadows on them as well, however.

How can I fix it so that only one of the buttons adjusts its top margin upon hover and not all five of them?

Solution :

Add the CSS

vertical-align: top;

to your navbarright a, where you also have display: inline-block.

Here's a working JSFiddle.

display: inline-block keeps everything in a tight block, when one div moves down so do the rest. vertical-align: top makes the divs aligned with the tallest element, keeping them in place while you move individual ones down.

    CSS Howto..

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to remove all pseudo selectors from a CSS selector string using Javascript?

    How to code a drop down menu in css?

    How to add a custom font to Rails app?

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How can I stretch an empty floating div to the full height available using css?

    CSS help, how to target this link inside of div

    How to change the mouse cursor over an embedded flash?

    How to get rid of hidden space HTML/CSS [closed]

    How to get list of custom CSS properties

    How do i apply fadein and fadeout effect for this?

    How is a CSS “display: table-column” supposed to work?

    Greasemonkey: How to do something when style=“display: none;” changes?

    show image in aspect ratio and all image size same height and width

    How to Change CSS style of the same element that is NOT Hovered

    Getting CSS3 to show up in child elements when used on parent element

    How to hide/show the content of a div with dynamic height?

    How to use random array output as a for-loop CSS attribute in jQuery

    How to keep the link color on CSS buttons as one color when changing default link colors?

    How to distribute cell height evenly within a row spanning two cells vertically?

    How to make width grow slowly when I add element?

    How do I (by default) style different types of labels differently?

    Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How to style unordered lists in CSS as comma separated text

    Dompdf: how to get background image to show on first page only

    How does google elegantizr work?

    How to do HTML/CSS form helpers/popover

    How can I make these CSS absolute positions work in IE?

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS