CODEWITHSUNDEEP
htmlcsspositionmargin
ampora
ampora

Reputation: 43

how to position element equally from left and right sides?

i have an element of fluid width (because of varying screen resolutions) and of a 125px height. i want it to be 125px from the left and 125px from the right. in a way, it's centered, i guess. how can i achieve this? maybe i'm wording my question really badly but i'm not finding an answer when i google it or even when i search stackoverflow.

here's the css (i Know right:125px; doesn't work but i added it in for you guys to kinda understand the effect i want to achieve?):

#header {
 position:fixed;
 width:100%;
 height:125px;
 top:0;
 left:125px;
 right:125px;
 text-align:right;
 background:black;
 color:white;
 font-size:100px; }

and here's the html:

<div id="header">header</div>

and the fiddle: http://jsfiddle.net/k4tefz34/4/
thank you so much guys ;o;

Upvotes: 0

Views: 146

Answers (7)

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8950

What about setting the margin instead of the right and left values, like this?

 position:fixed;
 width:100%;
 height:125px;
 top:0;
 margin:0px 125px;
 text-align:right;
 background:black;
 color:white;
 font-size:100px;

This will center your div.

Upvotes: 0

Rio Adetya Rizky
Rio Adetya Rizky

Reputation: 361

i think you should change your html code like this

html 

<div id="header">
   <div class="sub-header">header</div>
</div>

css

#header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
}
    #header .sub-header{
        background-color:#000000;
        color:#FF6600;
        height:125px;
        margin:0 125px 0 125px;
    }

DEMO JSFiddle

Upvotes: 0

anik4e
anik4e

Reputation: 493

You Can Use this-

 #header {
   background: none repeat scroll 0 0 black;
   color: #fff;
   height: 125px;
   width: 100%;
}
.warp {
   margin: 0 125px 0 126px;
   position: relative;
}

JSFiddle

Upvotes: 0

getmeque
getmeque

Reputation: 1

change your position don't keep it fixed

#header {
    position : relative;
    width : 100% ;
    height : 125px;
    top : 0 ;
    left : 125px;
    right : 125px; 
}

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15911

What you have to undertsand is that if something is of 100% width, it can not have margin left and right

Similarly, for a fixed div, you can not set margins

So you have to reduce 100% width and also position(unless you really need it)

demo (without position)

demo (with position)

#header {
    position:fixed;
    width:50%; /* anything except 100% */
    height:125px;
    top:0;
    margin-left:125px;
    margin-right:125px;
    text-align:right;
    background:black;
    color:white;
    font-size:100px;
}

Upvotes: 0

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

You have to remove width:100%. Try this:

#header {
   position:fixed;
   height:125px;
   top:0;
   left:125px;
   right:125px;
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85573

It's working great but just you've defined the width to be 100% so, it's causing to display from right. Just decrease the 250 pixels (left value + right value) width from 100% then see that is left 125px and right 125px:

#header {
     position:fixed;
     width: calc(100% - 250px);
     height:125px;
     top:0;
     left:125px;
     right:125px;
    text-align:right;
     background:black;
    color:white;
    font-size:100px;
 }

demo

Upvotes: 3

Related Questions