CODEWITHSUNDEEP
htmlcss
RamDesk
RamDesk

Reputation: 40

Put one div after another

I want to set two divs like the following. http://snag.gy/ynuiY.jpg

This is my HTML code

<div id="topbar">
This is a top bar
</div>

<div id="wrapper"> 
wrapper
</div>

This is my CSS

#wrapper{
    z-index:2;
    marign-top: 30px;
    width:80%;
    height:auto;
    background-color:#FFF;
    left:auto ;
    right:auto ;
    margin: auto;

}

#topbar{
    height:30px;
    width:100%;
    background-color:#333;
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    color:#FFF;
    overflow: hidden;
}

But the output is like following. (no wrapper) https://i.sstatic.net/DXuWD.jpg

Please help me to solve this.

Upvotes: 2

Views: 5360

Answers (4)

Thanush
Thanush

Reputation: 56

Change the "margin-top: 30px;" to "padding-top: 30px;" 

#wrapper {
    padding-top: 30px;
    width:80%;
    height:auto;
    background-color:#FFF;
    left:auto ;
    right:auto ;
    margin: auto;
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

You have to change your #wrapper margin to padding

JSfiddle Demo

CSS

#wrapper{
    padding-top: 30px;
}

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

Another solution is to set #topbar position to relative:

#topbar{
    height:30px;
    width:100%;
    background-color:#333;
    position:relative;/*Change to relative*/
    color:#FFF;
    overflow: hidden;
}

Also is margin-top no marign-top

fiddle

Upvotes: 1

Luke Berry
Luke Berry

Reputation: 1947

I think this is what you're after: http://jsfiddle.net/ht8k40tr/

The problem is due to the order in which you're setting the margins.

Currently you're setting the top margin to be 30px, but then you're resetting that by setting all margins to auto, a simpler way to do this is just to set the margin as follows margin: 30px auto which sets the top margin to 30px, and the remaining margins to auto.

Upvotes: 0

Related Questions