0

I have a box here that requires the width to change to the width of the text. The only problem is I can not use float: right; which would solve that issue because I can't use it for the php application I am building. How can I get the width to change? I am using margin-left: auto; to solve the problem of it staying to the right, but the width stays at the max width I set it to. I can't use float that is the problem. How can I go about fixing it? I blocked out the float in the code but if you activate it and block out margin-left: auto; you will see what I mean.

Basically if there is less text in the box it will have a smaller width than if there was more text.

<style>
* {
    margin: 0;
    padding: 0;
}
.gBoxTall {
    background-color:#0C9;
    clear: both;
    margin-left: auto;
    /* float: right; */
    margin-top: 15px;
    max-width: 270px;
    padding-left: 22px;
}
.gBoxTall .right {
    background-color:#0C9;
}
.gBoxTall .right p {
    margin-left: -5px;
    padding: 8px 30px 0 0;
}
.gBoxTall .bottom {
    background-color:#0C9;
    height: 20px;
    margin: -10px 0 0 -22px;
}
.gBoxTall .bottom .right {
    background-color:#0C9;
    float: right;
    height: 20px;
    width: 43px;
}
</style>
<div class="gBoxTall">
  <div class="right">
    <p class="message">My name is Earl.</p>
  </div>
  <div class="bottom">
    <div class="right"></div>
  </div>
</div>
Puck
  • 2,080
  • 4
  • 19
  • 30
soniccool
  • 5,790
  • 22
  • 60
  • 98

1 Answers1

1

You can try what was suggested at How to make div not larger than its contents? - e.g. use display:inline-block and don't use the width property.

Community
  • 1
  • 1
Brian L
  • 3,201
  • 1
  • 15
  • 15
  • I did that but then the .gBoxTall is all the way to the left and i need it on the right.. – soniccool Sep 21 '11 at 02:38
  • display:inline-block didnt work for it either.. im converting from html to pdf to jpg – soniccool Sep 21 '11 at 02:39
  • try absolute positioning (without `display:inline-block`)? It seems that you basically want to `float:right`, but for some reason you can't? Your table suggestion, even though it's not nice HTML, seems like it would work for your needs. – Brian L Sep 21 '11 at 09:06