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>
</div>

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 Create Diagonal Heading Line with Pure CSS

    How to disable a CSS class with javascript on window.load()

    How to use PHP to get the value of a star rating widget?

    How can I refer to an internal gradient definition inside an SVG sprite symbol?

    Hide/Show Div Depending on Screen Width

    How to add a repeating png image in the background of a webpage using CSS?

    CSS/Web design: how to create an oblique/sided button

    How do I justify a horizontal list?

    How to remove the shadow effect of textbox in CSS? [closed]

    How to flow text from a box to another with CSS

    How to reuse footer with only HTML/CSS?

    how to use auto with a height in css

    How to put bull inside css circle

    How to add css to linked rails imge

    How to draw half-opened line in CSS? [closed]

    How to prevent exceeding the parent's boundary?

    How do you size an SWF object based on a Blueprint CSS span range?

    How to Prevent Opacity for Sub Div using Jquery

    How to apply css to all the divs in hierarchy in HTML?

    How to increase a CSS value by the value of a JS variable?

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    how to make a div toggle background-position “onclick” while keeping hover

    How to set froala to calc height using css

    how to ignore br or line breaks in text with pure css truncate text button

    How is this put in the center using CSS?

    How to attach an element on the dynamically created div

    How to apply CSS to namespace prefixed elements in IE8?

    How to make a responsive mosaic css fullscreen width

    How do you make Static tool tip with CSS?

    How to draw a line from the middle of the page to the right side?