rarebit Posted January 22, 2009 Share Posted January 22, 2009 Hi, I've awkwardly constructed a box (i'll try and optimise later). There's 3 images to make up a capsule box, two semi-circles at 13x25 and the centre's background at 2x25. What i'm wanting to do is not to have to set the width of the inner div, but to let it resize automatically to the contents? <html> <head> <style type="text/css"> .pagi_main {width:100%;height:25px;} .pagi_left {background-image:url(cap_01_l.png);background-repeat:no-repeat;background-position:top left; width:13px;height:25px;position:absolute;} .pagi_cen {background-image:url(cap_01_c.png);background-repeat:repeat-x;background-position:top left; left:13px;top:0px;width:auto;height:25px;position:absolute;padding:4px;} .pagi_right {background-image:url(cap_01_r.png);background-repeat:no-repeat;background-position:top right; left:100%;top:0px;width:13px;height:25px;position:absolute;} </style> </head> <body> <br><br> <div class='pagi_main'><div class='pagi_left'><div class='pagi_cen'> 1 2 3 4 5 6 7 <div class='pagi_right'></div></div></div></div> <br><br> </body> </html> Many thanks! Quote Link to comment Share on other sites More sharing options...
glenelkins Posted January 22, 2009 Share Posted January 22, 2009 have you tried the "min-width" attribute? im not sure if this works in older browsers, but the latest IE and FF it works in both Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 22, 2009 Author Share Posted January 22, 2009 No, that probably goes the other way. I still want it to size to the smallest width of the contents... However, I have just wrapped the contents with a <nobr> tag, and in this instance, that'll do grand, ah! Cheers... Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 23, 2009 Share Posted January 23, 2009 No, that probably goes the other way. I still want it to size to the smallest width of the contents... However, I have just wrapped the contents with a <nobr> tag, and in this instance, that'll do grand, ah! Cheers... Floating a div works just as well. I discourage using the <nobr> tag. Is there a css alternate, or could you floating the div to achieve the same look? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.