Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

prevent div's from taking 100% width

Tags:

html

css

People also ask

How do I stop div from full width?

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).

How do I stop a div from resizing?

It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none.

What does width 100% do in CSS?

width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.


Assign a width to the absolutely positioned element? If you're looking for shrink-wrapping, float:left or display:inline-block are perfect for that.


Try display:inline-block, it always helps me in situations like this.

http://jsfiddle.net/FaYLk/


Its not as simple to just do:

display: inline-block;

You must do more than that to cross browser this.

display: inline-block;
display: -moz-inline-stack; /* for firefox 2 */
*display: inline; /* for ie 6 and 7 */

Put a container around all the content. E.g

<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div>
.container{ display: inline-block; }