Question

When a div is styled as “inline”, it seems all its dimension variables lost effect.

for example

<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>

gives me a big box, but after I add inline style, the box shrink to the smallest size.

for example

<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>

My question is, is there a way that I can keep the div inline (same line as some preceded text) and at the same time able to fix its size. (either div or span)

Thanks.

Answer 1

The width of inline elements is ignored. From my experience, in cases like this using a float will solve the issue.

You can also use inline-block, but if you have to support older browsers you may not wish to use this.

The floated div will float to the left of the the nearest block element parent (assuming this parent is also not floated). If you need more control of where the div is floating, add a wrapping (non-floated and block) div around your floated div