Setting the width of a Note to its content

[rogersm]

Hi there,

I have a note that is implemented using a div. I would like the width of this div to automatically adjust itself to fit the content included in it. I thought the easiest way of doing this might be to use display: inline-block in the css of the note. So the css of the note would be:

Code: Select all

div.note
{
	background-repeat: no-repeat;
	border-radius: 6px;
	padding-right: 12px;
	padding-top: 10px;
	border-bottom-color: #000000;
	border: solid 1px #3979a1;
	padding-bottom: 10px;
	margin-top: 5px;
	margin-bottom: 12px;
	background-color: #f5f5f5;
	overflow: hidden;
	background-image: url('../Images/NoteIcon.png');
	background-position: 2px 2px;
	padding-left: 40px;
	display: inline-block;
}

Unfortunately, Flare does not handle inline-block too well in the XML editor (MadCap are aware of this). However, my main issue is that display:inline-block works well in the note, except when it is included in a procedure (see attached preview). So I am just wondering if there is another way of automatically setting the width of a div to fit its content (preferably one that avoids any jQuery/Javascript)?

thanks,
mark

[NorthEast]

I think using inline-block is fine - but I'd guess the problem is your HTML structure.

In step 1, I'd guess that the text before the note is not inside a paragraph, which means the note will follow that text inline - because div.note is an inline block.

The note in step 1 should look ok if the HTML is like this:

Code: Select all

<ol>
   <li><p>Step 1</p>
      <div class="note">
         <p>Note text</p>
      </div>
   </li>
   <li>Step 2</li>
</ol>

[rogersm]

Great, thanks very much Dave.