Jump to content

Div Boxes Take Up Full Width - Not Good.


rob86
 Share

Recommended Posts

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

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.

Edited by Rob86
Link to comment
Share on other sites

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

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
 Share

×
×
  • Create New...