Shorte Posted July 7, 2009 Share Posted July 7, 2009 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:Now 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 More sharing options...
Ingolme Posted July 7, 2009 Share Posted July 7, 2009 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 More sharing options...
Shorte Posted July 7, 2009 Author Share Posted July 7, 2009 Oh geez, I feel silly now! I had been raking my brain about this and forgot about the display:inline-block.Thank you so much!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.