CODEWITHSUNDEEP
htmlcss
frazman
frazman

Reputation: 33293

how to do css styling

A very simple task in hand.. but my browser is laughing on my face with my futile attempts.

How do I style a div class just around the text

So I am using jinja on backend and my html looks like this

<div class="content">
<pre>  {{contents}}</pre>
</div>

and my css is 

div.content {
    background-color: #add8e6;

}

But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line.. I just want to gracefully wrap the color across the text rather than whole horizontal page. When I try 

display: inline;

all the background color vanishes.

Upvotes: 0

Views: 68

Answers (2)

Jeff
Jeff

Reputation: 12183

Try this:

div.content * {
    background-color: #add8e6;
}

This will apply the style to all the elements within the div block.

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Use display:inline-block

div.content {
    background-color: #add8e6;
    display:inline-block

}

DEMO

Difference between inline and inline-block

inline-block - This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline - This value causes an element to generate one or more inline boxes.

Upvotes: 5

Related Questions