How can make input element displayed same as block element?

Question

I want to make universal fluid element with solid one near him and place them in line:

// wrapper starts here
[=(XX%)=solid=] [---------------------(auto)-fluid-]
[=(XX%)=solid====================] [--(auto)-fluid-]
[-(auto)-fluid---------------------] [=(XX%)=solid=]
[-(auto)-fluid--] [=(XX%)=solid====================]
// wrapper ends here

But when I tried traditional variant with "float:" style attribute - failed on "input" element: http://jsfiddle.net/iegik/pMRD8/

Also tried hack provided in similar question: What's keeping my input element from displaying like a block element?

DeeDub · Accepted Answer · 2012-11-19 16:56:52Z

1

Could use a little javascript and math:

var b = $("#mainWrap").css('padding').split('p')[0];
$("#fluidInput").width($("#mainWrap").width() - $("#btn1").width() - (b * 2));

http://jsfiddle.net/TNCodeMonkey/pMRD8/4/

answered Nov 19, 2012 at 16:56

DeeDub

1,6621 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iegik Over a year ago

Nice answer, but can I avoid JavaScript to do that in CSS only?

DeeDub Over a year ago

I tried a few pure CSS approaches to fixing this, but the javascript is all I could come up with. I like your commitment to keeping it CSS, but sometimes you have to journey to the darkside for some awesomeness :)

Collectives™ on Stack Overflow

How can make input element displayed same as block element?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related