CODEWITHSUNDEEP
htmlcssyui
Burt
Burt

Reputation: 7758

Input width to be 100% - 20px

I know this isn't possible but I am wondering if there is any other way of achieving the effect.

If you look at the jsfiddle below you will see that the input is 94% of the container and centered, this works OK but what I really want is for the input to have a 10px margin on each side.

http://jsfiddle.net/brendan_rice/4ugxk/13/

Can anyone help please?

Upvotes: 0

Views: 463

Answers (4)

sandeep
sandeep

Reputation: 92793

Remove width from your .bottom DIV. Write like this:

.bottom{
    position: absolute;
    bottom: 0px;
    background-color: red;
    left: 10px;
    right:10px;
    text-align: center;
}

Check this: Fiddle

Upvotes: 1

Dmytro Zarezenko
Dmytro Zarezenko

Reputation: 10686

Try this http://jsfiddle.net/hRrVv/

Upvotes: 3

Ross McLellan
Ross McLellan

Reputation: 1881

You could put a wrapping span (or div) around the input element and use that to apply the margin you want. You'd need to remove the default styling from the standard input box (padding, border etc.) and style this wrapping element as you want the input to appear.

See: http://jsfiddle.net/4ugxk/43/

Upvotes: 0

Lukas
Lukas

Reputation: 7734

maybe try something like that http://jsfiddle.net/4ugxk/24/ if it's ok

.bottom{
  position: absolute;
  bottom: 0;
  left:0; right:0;
  margin-left:10px;
  margin-right:10px;
}

Upvotes: 1

Related Questions