CSS resizing the
to fit the text

Question

I have a <div> called "container" which wrap another <div> called "box". "box" has text inside it.

The problem is I can't seem to resize the <div class="box"> to fit the text. I also got a diagram to explain my situation.

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="float.css">
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <div class="box">Hello my name is jack</div>
</div>
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <div class="box">Hello my name is jack</div>
</div>

My CSS

.container {
    background-color: #ED8713;
    height: 300px;
    width: 300px;
    margin: 60px;
    margin-top: 50px;
}
.box {
    background-color: #FFFFFF;
    width: 270px;
    margin: 0 auto;
    margin-top: 15px;
    text-align: center
}

Niet the Dark Absol · Accepted Answer

You know what? We're all idiots. Here's the REAL answer:

HTML:

<div class="container">
    <br>
    <br>
    <br>
    <br>
    <span class="box">Hello my name is jack</span>
</div>

CSS:

.container {
    background-color: #ED8713;
    height: 300px;
    width: 300px;
    margin: 60px;
    margin-top: 50px;
    text-align: center;
}
.box {
    background-color: #FFFFFF;
    margin-top: 15px;
}

Alba Mendez · Answer

Let the .box be an inline-block...

.box {
  display: inline-block;
}

...and center it!

.container {
  text-align: center;
}

Adding this two snippets to your stylesheet and removing the width: 270px should suffice.

Melki · Answer

You should remove the width or set it to auto : width : auto

CSS resizing the <div> to fit the text

Tags:

css

JackRoster

3 Answers

Niet the Dark Absol

Alba Mendez

Melki

Recent Activity

Donate For Us