CODEWITHSUNDEEP
css
Adriano dos Santos Fernandes
Adriano dos Santos Fernandes

Reputation: 755

Position an element from its normal left to the most right place

I have this http://jsfiddle.net/Gqufq/ and I want to position the second input right after (in the same line) of the first and end it to the right of the div.

How to do this with CSS, without put an explicit dimension on the first input? (Also, the div may have a variable width)

div { width: 200px; background-color: gray; }

<div>
    <input size="5" />
    <input />
</div>

Upvotes: 0

Views: 84

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 106008

The use of float technic and labels will do it: http://jsfiddle.net/H3YQ3/1/ , http://jsfiddle.net/H3YQ3/2/ 

div {
    width: 200px;
    background-color: gray;
    margin:1em;
}
label {
    display:block;
    overflow:hidden;
}
label:first-child {
    float:left;
    width:50px;
}
input {
    display:block;
    width:100%;
    box-sizing:border-box;
}
.big {
    width:400px;
}

Upvotes: 0

Raman Bhasker
Raman Bhasker

Reputation: 66

add size attribute to 2nd input box also.

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/Gqufq/1/

  div { width: 200px; 
background-color: gray; 
display:inline;
padding:5px; }

Upvotes: 2

Praveen
Praveen

Reputation: 56509

Change the position: absolute for 2nd input. JSFiddle

But it won't look good. so change the width of the div as width: 100%

Upvotes: 0

Related Questions