Adjust DIV size to content

Question

Adjust DIV size to content

Navigation

#1 by (1 votes)

2

I'm working on a chat for a website, the chat is Ok, but as always I get to set up CSS.

I want to adjust the DIV to the size of the content and put, only that the DIV occupies 100% of the width.

.div-chat-i {
color:#000000;
background-color:#C6E2FF;
padding:5px 12px;
border-radius:10px;
border:1px solid #ddd;
width: auto; }

css

asked by anonymous 11.05.2018 / 20:57

1 answer

Retractable menu that does not close Display code on page

score 1 · Accepted Answer

The div is a block-type element, and by default occupies 100% of the width of the screen, or the element it is in.

See in the example below that I put it with 15% of the width of the parent, which in the case is the body, which by default is 100% of the screen width ...

EDIT: In the example I made, leave the div, with a minimum width of 15% and a maximum width of 25%, so if the content is small it occupies at least 15%, and form greater than 25% the line will break.

NOTE: I used position:absolut to place the chat in the lower right corner

.div-chat-i {
    color:#000000;
    background-color:#C6E2FF;
    padding:5px 12px;
    border-radius:10px;
    border:1px solid #ddd;
    /* estilo de posicionamento e largura*/
    min-width: 15%; 
    max-width: 25%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: auto;
}

<div class="div-chat-i">
    <p>Lorem, ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores ratione adipisci dolorem animi ut.</p>
</div>