CODEWITHSUNDEEP
css
Lasse Edsvik
Lasse Edsvik

Reputation: 9298

Margin left and right -10px in a container

I'm trying to make a menu to have a "ribbon-like" 3d effect were it should "wrap" over the container.

Problem is that it doesnt matter if I try margin-left and right to be -10px, it just pushes the div 20px to the left. (atleast in chrome). And left: -10px; and right: -10px doesnt work either. What might be missing?

http://jsfiddle.net/lasseedsvik/UhwYg/1/

HTML

<div id="container">
    <div id="top-menu">
        <ul></ul>
    </div>
</div>

CSS

#container {
    background: blue;
    height: 300px;
    width: 200px;
    margin: 0 auto;
}

#top-menu {
    clear: both;
    background: red;
    width: 200px;  /* +20px? */
    height: 20px;
    position: relative;
    /*
    margin-left: -10px;
    margin-right: -10px;
    */
}

#top-menu::before, #top-menu::after {
    content:' ';
    position: absolute;
    bottom: -10px;
}

#top-menu:before {
    border-top: 10px solid red;
    margin-left: -10px;
    border-left: 10px solid transparent;
    left: 0;
}

#top-menu:after {
    border-top: 10px solid red;
    margin-right: -10px;
    border-right: 10px solid transparent;
    right: 0;
}

Upvotes: 0

Views: 3553

Answers (2)

alireza
alireza

Reputation: 507

How about border left and right with a margin ?

http://jsfiddle.net/parslook/UhwYg/2/

border-left: 10px solid red;
border-right: 10px solid red;
margin-left:-10px;

add it in #top-menu styles

Upvotes: 3

Praxis Ashelin
Praxis Ashelin

Reputation: 5227

You will need to use position: absolute; if you want the element to extend outside of the container width. Fiddle

Alternatively, place your menu outside of the container. Fiddle

Upvotes: 3

Related Questions