How to move up an inner box and keep outer box in place with CSS?


Tags: css

Problem :

I have the following code:

<html>
<head>
<style>
#yellow {height:100px; background:yellow;}
#blue {background:blue;}
#red {background:red; width: 400px; height: 100px; margin:0px auto;}
</style>
</head>
<body>
        <div id="yellow"></div>
        <div id="blue">
                <div id="red">Lots of content goes in here that will expand the outer blue box as well</div>
        </div>
</body>
</html>

I want the red box to move up about 30 pixels so that it overlaps both the yellow box and the blue box. When i tried to do a #red {margin:-30px auto 0px auto;}, the blue box moved up 30 pixels with the red box as well, even though I wanted the blue box to stay in place.

How do i make the redbox move up and overlap both the yellow and blue?



Solution :

Here you go.

#yellow {
    height:100px;
    background:yellow;
}
#blue {
    background:blue;
}
#red {
    background:red;
    width: 100px;
    height: 100px;
    margin:0px auto;
    position:relative;
    top:-30px;
}

    CSS Howto..

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How put div element to bottom of another div element

    How do you center a line-wrapped

    How to mask an SVG within a div?

    How to make cross-browser compatibility with IE10 and IE11?

    How to put
      around image in css

    How to automatically update relative CSS paths for minification?

    How to wrap lines in an inline-block with CSS?

    How to convert a rectangle to TRBL CSS rect value?

    How do I create a menu that appears on hover?

    How does the padding work in responsive CSS square?

    How to make this layout more responsive in CSS?

    How to select nth line of text (CSS/JS)

    How to change CSS in media tag within @media only tags with jquery?

    How can I vertically align text within a span element, or make the span the same size as the text?

    Show/Hide elements in a table

    How to remove all css classes of all items of a
    with jQuery?

    bootstrap css, how to make full width div inside container

    CSS How to center a div horizontally

    How can

    be centered and justified?

    How to add a fade effect to html transition with javascript

    How to make diagonal div

    How to apply a css class to master page based on the url using jquery? [closed]

    How to write css for that?

    Cannot get Font Awesome Images to Show

    How to separate content and presentation layers on JSPs?

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to align vertical text horizontally center?

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?