CODEWITHSUNDEEP
htmlcsspositioning
Oussama Bouthouri
Oussama Bouthouri

Reputation: 655

positioning a div right and left simultaneously

i'm trying to make a div have a width using the absolute positioning and it work fine in google chrome but in fierfox it doesnt. why is there a conflict ? i tried the exact same code in both browser and on fierfox doesnt reconize it.

   <!DOCTYPE HTML>
<html >
    <head>
        <meta charset="utf-8"/>
        <title>Kelma</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>

            <input type="text" id="center" />
    </body>
</html>

and this is the css file

#center{
    position: absolute;
    left:50px;
    right: 50px;
}

Upvotes: 0

Views: 731

Answers (5)

Vinicius Lima
Vinicius Lima

Reputation: 544

Use this on your css:

#center {
   margin: 0 auto;
   width: 90%;
}

Hgs, Vinicius =)

Upvotes: 0

Paul M
Paul M

Reputation: 366

Isn't this what you mean?

body{padding: 0 50px;}
input{width:100%;

Upvotes: 0

user1633525
user1633525

Reputation:

Try this:

#center{
  position: absolute;
  left:0px;
  width: 100%;
}

Upvotes: 0

trajce
trajce

Reputation: 1490

Take a look at this:

<!DOCTYPE HTML>
<html >
    <head>
        <meta charset="utf-8"/>
        <title>Kelma</title>
        <link rel="stylesheet" href="style.css" />
        <style>
            #wrapper
            {
               position: absolute;
               left:50px;
               right: 50px;
            }
            #center
            {
               width:100%;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
               <input type="text" id="center" value="test" />
        </div>
    </body>
</html>

i wrapper the input with a div, and i applied the styling to the div, and 100% width to the input.

Upvotes: 1

Chris_Bogausch
Chris_Bogausch

Reputation: 72

I've gotten it to work with inline css

here is an example from my personal website

<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>

I personally like to use the percent as it can look better on some sites. Let me know if this works for you! To see it live: http://cbogausch.com/portal It works in both firefox and chrome

Upvotes: 0

Related Questions