CODEWITHSUNDEEP
css
kjo
kjo

Reputation: 35321

css for "all available width"?

How can I specify that the width of a given element should be the "maximum available width", once its horizontal margins, its parent's horizontal padding, etc. are taken into account, and also assuming that the parent's width has not been specified explicitly?

BTW, contrary to what one may think, width:100% is decidedly not the answer to this question (see here, for example).

(There are many questions on SO that seem to ask the same thing as this one, but on closer inspection one finds that those are far more specific than this one, and their answers depend on very specific details of some code presented in the question. Here I'm looking for as general as possible an answer.)

Upvotes: 0

Views: 81

Answers (2)

ScottS
ScottS

Reputation: 72261

Fairly Easily

What you describe is the default behavior of anything that is display: block. So this fiddle shows a "normal" layout for some mixed inline and block elements contrasted to all those elements simply set to display: block.

Upvotes: 1

Leonardo Barbosa
Leonardo Barbosa

Reputation: 1396

To do this you can add display: table; to the parent. The childrens will always fill 100% of the parent element.

Check this JSFiddle that I put together for you.

Upvotes: 1

Related Questions