CODEWITHSUNDEEP
htmlcss
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Reducing the width of div moves to left side in css

Here is the

http://jsfiddle.net/vicky081/jmGwX/5/ I want to change the width of the div which is now 100% when i change the width to 50% the div appear left side. How can i make that div as center by this when i reduce the size of the div it appear from the center is it possible? I know the width of the div is 100% then it appear like from left 0 to right 100 if i change the width to 50 also it appear from left to 50% right Is there is a way to show it from center when i change the width it appear both for example: if i reduce the width of the div is 50% then it appear like 25% from center of left and 25% center of right

Here is the code CSS:

.notify {
    background: #FFFFFF;
    width:50%;
    position: relative; 
    margin:-13px 0px 0px -5px;
    padding: 2px 0px 0px 0px;   
    border-bottom:2px solid #CC0000;
    box-shadow: 0px 4px 5px #AAAAAA;
    font-size:14px;
    font-family: 'Lato Regular', Arial;
    text-transform:uppercase;
    text-align:center;
}

Upvotes: 4

Views: 20921

Answers (2)

chetan mehta
chetan mehta

Reputation: 369

The first Solution is perfect but in case you want to play with that using javascript. Just include this line.

<script>
var decider=parseInt(document.defaultView.getComputedStyle(document.getElementsByTagName("div")[0]).width)/2;
document.getElementsByTagName("div")[0].style.left=(window.innerWidth/2)-decider;
</script>

Upvotes: 1

Michal
Michal

Reputation: 3642

Edit your CSS like here:

.notify {
    ....
    margin: 0 auto 0 auto;
    ....
}

http://jsfiddle.net/wRM8j/

EDIT:

If position is fixed add

.notify {
    ....
    position: fixed;
    left: 0;
    right: 0;
    ....
}

http://jsfiddle.net/vZexH/

Upvotes: 5

Related Questions