Jump to content

Div Box To Stretch Automatically?


Recommended Posts

I have been working on a piece of code for a while, trying to get it to work like I want it too. I'm probably doing something wrong somewhere. I have a div box, and it will allow for users to insert text and then I wanted the box to stretch to fit the text. However, the box is stretching way beyond the text.Here is the code I'm talking about:

<div style="border:1px solid #c9d2d8;background-color:#ffffff;padding:5px;"><b>Movie: </b><u>{SIMPLETEXT1}</u><img src="./images/rating/{SIMPLETEXT2}.png" width="100" height="20" alt="This movie was rated {SIMPLETEXT2} stars out of 5" title="This movie was rated {SIMPLETEXT2} stars out of 5" /></div>

{SIMPLETEXT1} = Movie Title{SIMPLETEXT2} = Star rating such as; 0.0, 0.5, 1.0, 1.5, 2.0, 2.5 and etc... until you reach 5.0Basically it's a bbcode. So when someone goes to use this bbcode, it will look like this [rating=][/rating] with no text added, and when they add text it looks like this: [rating=Movie Title Here]3.5[/rating]It looks like this when it is rendered:rater.pngNow I want it to just automatically stretch to fit around the text (movie title), and stop where the text stops. I hope that makes sense?Any ideas of what I am doing wrong?

Link to comment
Share on other sites

Block elements stretch automatically to take up all the available width of their parent elements.You can try adding

display: inline-block

to the CSS of the box.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...