rob86 Posted August 25, 2009 Share Posted August 25, 2009 I'm having some trouble with this. I have a little function that writes something and puts a border around it. The border takes up the full width of the page though and thats not what I want. I'm aware of using the width css to set the width in pixels or percentage, but how do I get it to just be a border around it's contents?Here's the little practice page I'm working on http://142.166.244.124/example.php It's just a web server running on my PC I use for learning..that's why there's no domain. It might not work though, I'm using dialup and might disconnect.In case that page doesn't work , I've got something that looks like this, some contents, a <div> with a border [CONTENTS___________________________________________________________________________________________________]and what I'd like is a simple border around the contents that doesn't take the full width of the page, but just around what's in the div.[CONTENTS]And here's the source.<html><head><style type="text/css">div.progbar1 {margin:2px 1px 0px; display:inline-block;background-color:red;width:10px;height:10px;border:1px solid black;}div.progbar2 {margin:2px 1px 0px; display:inline-block;background-color:grey;width:10px;height:10px;border:1px solid black;}</style></head><body><?phpfunction renderbar($score) {echo '<div style="border:2px groove red;width:inherit">'; for ($i=1;$i<=10;$i++) { if ($i<=$score) { echo '<div class="progbar1"></div>'; } else { echo '<div class="progbar2"></div>'; } } echo " $score/10";echo '</div>';} ?> <?php renderbar(3);?></body></html>PS: I'm a newbie at all this (html,css and php!). Anyway I hope I explained my dilemma good enough.. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2009 Share Posted August 25, 2009 use float: left;, or float right; Link to comment Share on other sites More sharing options...
rob86 Posted August 25, 2009 Author Share Posted August 25, 2009 That seems to work..thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2009 Share Posted August 25, 2009 You can also use display: inline-block; so that the box is not ignored from the flow of the page. Link to comment Share on other sites More sharing options...
rob86 Posted August 25, 2009 Author Share Posted August 25, 2009 Ah yeah that works too and even better in fact as the float was making it wrap around things. I have another question regarding this same thing, is there any easy way to add a centered caption above or below this little <div> like you do with tables? Here's an example (though it's probably obvious what I'm asking I've found it's better to be as clear as possible when asking questions). __MyTitle__| || || ||_________| Well, it's hard to draw like that on here but anyway. Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2009 Share Posted August 25, 2009 You would have to have nested <div> elements for that: <div class="hidden_block"> Caption <div class="visible_block"> Content here </div></div> .hidden_block { display: inline-block; text-align: center;}.visible_block { background-color: blue; text-align: left;} Link to comment Share on other sites More sharing options...
rob86 Posted August 25, 2009 Author Share Posted August 25, 2009 That makes sense, thanks again. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.