CODEWITHSUNDEEP
htmlcss
hillz
hillz

Reputation: 547

How to fit css textbox to content?

My CSS:

<style type="text/css">
body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(images/angel-beats-bg1.jpg);
    background-repeat: no-repeat;
    margin: auto;
    width: auto;
    height: auto;
    display: table;
    text-align:center;
}
.TextBOx {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border: #solid 30px #000;
    background-color: rgba(105,100,100,0.8);
    width:auto;
    height:auto;
    margin: 0;
    display:block;
}
</style>

Let this picture explains everything: enter image description here

I want the border of that semi transparent textbox to autofit with that content. How do I do that ? I've tried position:fixed; but instead it screws up my page.

My complete script:

<style type="text/css">
body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(images/angel-beats-bg1.jpg);
    background-repeat: no-repeat;
    margin: auto;
    width: auto;
    height: auto;
    display: table;
    text-align:center;
}
.TextBox {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border: #solid 30px #000;
    background-color: rgba(105,100,100,0.8);
    width:auto;
    height:auto;
    margin: 0;
    z-index:-1;
    display:block;
    text-align:center; 
    position:relative;
}
</style>
<body>
<img src="images/header.png" alt="OpenWrt Gratisan"><br>
<strong> 
<p>
<a href="status.php" title=""><font color="red">Status</font></a> | 
<a href="wget.php" title=""><font color="red">Wget WebUI</font></a> | 
<a href="putty.html" title=""><font color="red">Terminal</font></a> | 
<a href="wifi.php" title=""><font color="red">WIFI</font></a> | 
<a href="ch_pass.php" title=""><font color="red">Password</font></a> | 
<a href="profile.php" title=""><font color="red">Profile</font></a> | 
<a href="vpn.php" title=""><font color="red">Accounts</font></a> | 
<a href="ussd.php" title=""><font color="red">USSD</font></a> | 
<a href="sms_in.php" title=""><font color="red">Inbox SMS</font></a> | 
<a href="sms_send.php" title=""><font color="red">Send SMS</font></a> | 
</p>
<p>
<a href="vpn_log.php" title=""><font color="red">VPN log</font></a> | 
<a href="restart_log.php" title=""><font color="red">Restart Log</font></a> | 
<a href="wget_log.php" title=""><font color="red">Wget Log</font></a> | 
<a href="dial_log.php" title=""><font color="red">Dial Log</font></a> | 
<a href="about.php" title=""><font color="red">About</font></a>
</p>
</font></strong>
<br><br><br>
<div class="TextBox">';
MY CONTENT GOES HERE
</div>
.....

Upvotes: 0

Views: 17576

Answers (2)

deebs
deebs

Reputation: 1410

Just put your content in a DIV with width: 100%, then put that in the DIV.TextBox element (also watch for typos - you have a few). This new DIV will fill 100% width of the parent element.

<div class="TextBox">
    <div style="width: 100%; ">
        MY CONTENT GOES HERE
    </div>
</div>

In regards to centering, add text-align: center to the .TextBox class. There are other ways to center divs as well, such as margin: 0, auto ... but in your case stick with text-align: center.

.TextBox{
    text-align: center;
}

Upvotes: 0

sodawillow
sodawillow

Reputation: 13176

The solution is to set it to display: inline-block.

Quote from this : How to make div not larger than its contents?

You will be able to center it by setting text-align: center; on the parent element.

(also check if you have any padding on that element)

PS : take the habit to post some code or a fiddle, it's easier to get the context of your question

Upvotes: 2

Related Questions