Geek Answers Handbook

How to create a div block that matches the width of the content?

I have a div that contains fixed width content (image inside another div) and variable width content (text that changes dynamically). I need this external div for:

  • start over
  • be as wide as its contents
  • desirable to complete in a new line

Since it should be the only element in the row, I cannot use display:inline or display:inline-block . On the other hand, display:block not compressed automatically. Here is my code:

http://jsfiddle.net/D9QV9/

My experiments with overflow , float and clear failed. Any help, advice, links, etc. Very welcome. Thanks.

+8
html css
source share
3 answers

Here's how I did it: I gave the #outer CSS style display:inline-block , and then just placed it in another div using css display:block to make sure #outer stayed on a separate line:

CSS

 #outer { text-align: center; border-style: solid; border-width: 1px; border-color: #000000; height: 50px; width:auto; display:inline-block; } #image { float: right; width: 50px; } #element_block { display:block; }

HTML

 Some content above div <div id="element_block"> <div id="outer"> Text inside div<div id="image">IMG</div> </div> </div> Some content below div

Demo

+7
source share

I'm not sure if I got this for you, but I think this helps:

By placing

 display: table-cell; vertical-align: middle;

you can change the middle from above, from below, etc.

demo

+3
source share

Just add <br/> between your "text element" and your "block element". Then display: the built-in block of your inner container

 #outer { text-align: center; border-style: solid; border-width: 1px; border-color: #000000; height: 50px; width:auto; display:inline-block; } #image { float: right; width: 50px; }

jsfiddled here

+1
source share

More articles:


All Articles