how to end note div when text ends

[Nina Esile]

Hi All,

I've got a note style that I use all over the place. Sometimes, the length of the note goes only half way across the page. I'd want the background color of the note as well as its entire frame to end when the text ends. No need to have a long frame of color going across the page if there's nothing in it. In other cases, the width of the note text is constrained by say a menu or an image to the right of it and the text wraps. However, the note background and border continue across the page and run into the menu to the right. How do I control this?

Thanks,

Nina

[NorthEast]

Two CSS properties would help here:

(1) To stop the background flowing behind other elements, use:

Code: Select all

overflow: auto;

(2) If you also want to 'shrink-wrap' the box to fit the text/content, you could try:

Code: Select all

display: inline-block;

[Nina Esile]

Two CSS properties would help here:

(1) To stop the background flowing behind other elements, use:

Code: Select all

overflow: auto;

(2) If you also want to 'shrink-wrap' the box to fit the text/content, you could try:

Code: Select all

display: inline-block;

The first doesn't seem to have worked. What happens is the note is pushed down the page to a place where it will fit across.

The second worked! Thanks!

This is what I've got in the CSS:

div.note_pale
{
background-repeat: no-repeat;
border: solid 1px #a4ac67;
border-radius: 6px;
margin-bottom: 15px;
padding: 20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #ffe4b5;
display: block;
overflow: auto;
display: inline-block;
}

[Rene Severens]

Hi,

I think you can remove the line

display: block;

in this code.

display: inline-block; overrules display: block; .

Greetings,
René Severens.

[Nina Esile]

Hi,

I think you can remove the line

display: block;

in this code.

display: inline-block; overrules display: block; .

Greetings,
René Severens.

Yes. Indeed. Did that just after I posted this note because I saw it once I posted it. However, the result is actually the same.