How can I make width 100% max ? when I'm looking with both PC and iPhone?

Question

There is a table in my layout. I'm also using bootstrap's responsive design.
I want to know how to expand its width depending on the devices that I'm looking with.

For example, with my PC, my web site is usually shown with about 1200px width.
With my iPhone, my web site is usually shown with its resolution, which is about 640px.

I want to expand the bubble's width as much as possible(I mean 100% width) Bubble's width should be flexible. Shrinking window's width should make it resized automatically.

How can I?

Demo http://jsfiddle.net/8ASj4/

HTML

<div class="chat">

<table>
  <tbody>
     <tr>
               <th>Body</th>
     </tr>



    <tr id="comment_617">
            <td><div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>




    <tr id="comment_615">
            <td><div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>
</tbody>

 <div>

CSS

.chat {
    width: 100%;
    min-width: 300px;
}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.me {
    float: left;   
    margin: 5px 45px 5px 5px;
    min-width: 250px; 
    width: 100%;      
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: left;    
    margin: 5px 10px 5px 5px;
    min-width: 250px;
    width: 100%;          
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
}

Tables fell out of use for layouts 10 years ago. Use DIVs instead. — Diodeus - James MacFarlane, Jan 10 '13 at 19:27
Tables have a default display of `table`, which basically means "be only as wide as necessary to contain all of my children". — cimmanon, Jan 10 '13 at 19:33
Yes, seriously: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Diodeus - James MacFarlane, Jan 10 '13 at 19:35
@Diodeus http://jsfiddle.net/SAKWb/ please shrink down the width and see it that content is sticking out of fluid. This is my issue — Foo, Jan 10 '13 at 20:03

score 1 · Answer 1 · answered Jan 10 '13 at 19:38

1

Just remove all of the table related tags (table/td/tr/etc.)

<div class="chat">

<div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div>

              <div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div>

 <div>

http://jsfiddle.net/8ASj4/2/

answered Jan 10 '13 at 19:38

cimmanon

67,211
17
165
171

Thanks for answer. But contents sticks out from fluid when it's showing with bootstrap's responsive design :( Any idea? – Foo Jan 10 '13 at 19:57
http://jsfiddle.net/SAKWb/ please shrink down the width and see it that content is sticking out of fluid. This is my issue – Foo Jan 10 '13 at 20:03
Wasn't that solved in your previous question? http://stackoverflow.com/questions/14264958/why-the-strings-sticks-out-from-the-bubble-window – cimmanon Jan 10 '13 at 20:05
I was asking about the string was sticking out of bubble, now bubble itself is sticking out from fluid when I shrink down the window's width. Please try the js fiddle link! It's how shown in iPhone:( – Foo Jan 10 '13 at 20:09
You mean because of the `min-width: 300px` on your `.chat` element? – cimmanon Jan 10 '13 at 20:17
There's also a `min-width: 250px` on the `.me` and `.you` elements. – cimmanon Jan 10 '13 at 20:22
I removed it but it won't help:( – Foo Jan 10 '13 at 20:24

How can I make width 100% max ? when I'm looking with both PC and iPhone?

1 Answers1

Linked