table and div layout

Question

A table

<table>
<tr>
<td>
<button>10000000000</button>
</td>
<td>
<button>10000000000</button>
</td>
</tr>
</table>

and a div

<div> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

These 2 do the same thing; shows 2 buttons next each other, my Question is how can I keep these 2 buttons next each other in the div if the window gets resized to a smaller area. The table keeps them next each other but I don’t wana use tables.

Tanx for the help

Answer 1

You can use the CSS property/value white-space: nowrap to prevent line breaks in inline content.

Answer 2

<div style="width:400px"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Answer 3

In CSS

div {
   display: block;
   /** Setting width if needs be */
   width: 100%;
}

div span {
    display: inline;

/* or */
    float: left;
}

Answer 4

Try giving them all the width:

<div style="width:300px;"> 
  <span ><button style="width:100px;">10000000000</button></span> 
  <span ><button style="width:100px;">10000000000</button></span> 
</div>

Answer 5

If your div is styled to have at least the width that is required to be able to keep the two buttons next to each other, then it will maintain that width regardless of what the browser is being resized to:

<div style="width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

If you want to be able to tell the div to "go ahead and assume 100% width like you normally would, but always allocate at least 200px, even if this is more than 100% width", you can use min-width:

<div style="min-width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Now, this doesn't work in IE6, but here's another solution for the same that does:

<div> 
  <div style="width: 200px;">
     <!-- parent can never be smaller than its biggest child -->
  </div>
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Another solution, specifically to tell something not to wrap, would be to set white-space which is the CSS equivalent of the now deprecated <nobr/>

<div style="white-space: nowrap;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Note that this latter solution will not allow for any line breaks at all except for those manually created by a <br/> or other block element.