Menu
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> ......(more than 100 other div, with unknown width) </div> NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX! Thanks ...
710
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%. Show activity on this post. Percentage values simply represent a percentage of the length of the element's container.
By default a div is a block element, it means its width will be 100% of its container width, and its height will expand to cover all of its children. In case its children has a larger width than the div 's container width, the div itself does not expand horizontally but its children spill outside its boundary instead.
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
