How can I shift up a div and all divs that follow it?_问答_开发者

How can I shift up a div and all divs that follow it?

开发者 https://www.devze.com 2023-03-26 12:01 出处：网络

I have two divs that I want to appear on top of each other.I was able to do this by setting the top in css.My problem is that now there is a big gap where the div used to be.I would like to get all of

相关专题：css

I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.

You can see the fiddle here: http://jsfiddle.net/MzvC4/

Any suggestio开发者_StackOverflowns on how to achieve this?

Should be able to do this:

            #Navigation{
                position:absolute;
                margin-top:-250px; //or whatever px it is
            }

http://jsfiddle.net/MzvC4/1/

Set your bottom margin to the same offset:

#Navigation{
   margin-bottom: -249px;
}

You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/

#Navigation{
    position:absolute;
    top:10px;    
}

There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:

Fiddle: http://jsfiddle.net/MzvC4/

The HTML:

<div id="carousel">

</div>
<div id="navigation">

</div>
<div id="tabs">

</div>
<div id="subtabs">
    <div id="lefttab" class="subtabcontent">
        <p>This is left tab content</p>
    </div>
    <div id="righttab" class="subtabcontent lasttab">
        <p>This is right tab content</p>
    </div>
</div>

And the CSS:

div{
 border:1px red solid;   
}
#carousel{
    margin:0 auto;
    width:985px;
    height:249px;
    background:blue;
    }
#navigation{
    margin:0 auto;
    width:800px;
    height:100px;
    background:green;
    }
#tabs{
    height:113px;
    width:800px;
    height:50px;
    margin-left: auto;    
    margin-right: auto;    
    background:yellow;
    }

#subtabs{
    margin:0 auto;
    width:800px;
    height:133px;
    background:#ccc;
    }

    #lefttab, #righttab {
        float:left;
        margin:0;
        width:370px;
        height:133px;
        background:#fafafa;
        }

    #righttab {
        margin-left:56px; /* instead of #spacer */
        }

    .subtabcontent p {
            /* place tab specific styles here */
            padding:6px;
            font-size:1em;
            }

    .lasttab {
            font-size:2em;
            font-weight:bold;
        }