1

See: http://jsfiddle.net/h86Z3/

How can I make the right input and/or its wrapping div expand to the remaining space of the outer div with id "outer"? I need to preserve the nested div structure though

I tried:

#right, #right input { width: auto }

and: 

#right, #right input { width: 100%}

EDIT SORRY I should have specified that I indeed don't want to give it a specified width! I want it do adapt to width changes of the outer div

EDIT2 No, the question above does NOT answer mine. The changes recommended there applied to my structure do NOT work, as I said in the original question. My question is about nested divs containing inputs with an outer div of fixed width.

user3280015
  • 279
  • 2
  • 10

3 Answers3

0

Apply the widths to the containing divs instead of the inputs, and then give the inputs 100% width.

#outer { width: 300px; height: 22px; border: 1px solid blue }
input {
    border: 1px solid red
    width:100%;
}
#left {
    width:30px;
    float:left;
}
#right {
    width:270px;
    float:right
}
APAD1
  • 13,509
  • 8
  • 43
  • 72
0

Assuming that you are unable to use HTML 5, you could do something along the lines of:

left input { float: left; width: 10% }

right input { float: right; width: 85% }

If you can use HTML 5, you could look into using Flexbox which tends to be easier to grasp initially:

http://www.html5rocks.com/en/tutorials/flexbox/quick/

Community
  • 1
  • 1
M4YH3M 81
  • 23
  • 4
  • Yes I cannot use HTML5. I tried that, it doesn't actually align the divs correctly or doesn't use the entire remaining space – user3280015 Jul 08 '14 at 15:42
  • Can you provide a little more clarification on specifically what you are attempting here? So you want the outer div space to be completely taken up by the two input fields? Are you not wanting any spacing between them? – M4YH3M 81 Jul 08 '14 at 15:54
  • I think I figured out what you were struggling with as I had similar issues when designing my website. I highly recommend using a "normalizer" which clears out the padding / borders / margins so you have a clean slate. Also, you need the "clearfix" solution in order to make the floats stay wrapped around the other floats. http://jsfiddle.net/h86Z3/57/ – M4YH3M 81 Jul 08 '14 at 16:27
0

Float them both left and give the right input a fixed width of what ever remaining space is left minus padding and borders

#outer { width: 300px; height: 22px; border: 1px solid blue; }
input { border: 1px solid red; }
#left { float: left; }
#right { float: left; }
#left input { width: 30px; }
#right input { width: 260px; }

Fiddle here: http://jsfiddle.net/Nillervision/eq4DL/

BTW you forgot to put your id- and type-attributes in quotes in your HTML

EDIT: FIDDLE UPDATED TO HANDLE FLEXIBLE WIDTH SEE COMMENT BELOW

Nillervision
  • 451
  • 2
  • 10
  • But this isn't flexible, please see my EDIT. Also I thought you only need quotes around HTML (not XHTML) attribute values in case you want the values to contain whitespace – user3280015 Jul 08 '14 at 15:54
  • Sorry Did not see your edit. – Nillervision Jul 08 '14 at 15:56
  • I found ou that if you give your text inputs a class you can override the default fixed max-width. I've updated my fiddle http://jsfiddle.net/Nillervision/eq4DL/ – Nillervision Jul 08 '14 at 16:18