Question

So the problem i’m having is that I have multiple Div’s all with the same class applied to them (“Text”) I have not set a width or a height to these div’s and am allowing them to auto-size to the text that is in them (which is of course of varying width). Unfortunately when I do this any other div that uses my same “Text” class is taking on the width of the div which has the most Text inside of it. Is there any way with CSS or Javascript to Autosize Automatically each Div’s Width to the specific text that is inside of them? (Without having to manually specify a width to each div).

CSS

.Text{
   background-color: teal;
   padding: 7px;
   margin: auto;
}

HTML

<div class="Text">
     <h1>This is Some Text</h1>
</div>

<br />

<div class="Text">
     <h1>This is More Text only longer than the first</h1>
</div>

Answer 1

The default CSS for a DIV tag is display: block, position: static;. This makes the DIV tag take up the full width of its container. In your case, the container is wide enough to contain the longest DIV, and all the DIVs are taking up that space.

To fix this, you might set your CSS like this:

.Text{
   display: inline-block;
   background-color: teal;
   padding: 7px;
   margin: auto;
}

You may need to use <BR /> tags to force new lines, but I see you’re doing that already.