Home/ Questions/Q 7554839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T11:26:50+00:00

I have the following code: <html> <head> <style> #yellow {height:100px; background:yellow;} #blue {background:blue;} #red

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0