Geek Answers Handbook

CSS: two divs side by side, in auto-negotiation of a table cell

I have 2 divs in a table cell. I want the left hand of the div to fit the size of the content, and I want the right side of the div to float to the right. Both should be vertically centered.

The table cell is automatically sorted as follows:

<td style="width: 1px;"> ... </td>

Here is the fiddle

+4
source share
6 answers

Add display:table-cell and remove float from both divs and remove width from td

 .left{ font-size: 2em; line-height: 1.4; background: #FFCC66; display:table-cell } .right{ background: #CCFF66; display:table-cell; vertical-align:middle }

Demo

+5
source

You can try something like a snippet below,% will make the size initial from that number and automatically resize

 #div1 { float: left; height:60%; width: 40%; } #div2 { float: right; height:60%; width: 60%; }
+1
source

Increase td width

 <td style="width:56px;"> <div style="float: left; font-size: 2em; line-height: 1.4; background: #FFCC66">$50</div> <div style="float: right; background: #CCFF66; margin-top:10px;"></div> </td>
0
source

Check below for example. Both divs are vertically aligned with each other

 <table width="100%" border="1"> <tr> <td> <div style="display:table-cell; vertical-align:middle;">tetstingdfsdfds <br>test </div> <div style="text-align:right; display:table-cell; vertical-align:middle;">right side ...</div> </td> </tr> </table>
0
source

What if you add another cell, so that you have a price and another for the arrow, for example:

 <td style="background: #66FFCC; vertical-align: middle; width: 1px;"> <div style="font-size: 2em; line-height: 1.4;background: #FFCC66;">$50</div> </td> <td style="background: #66FFCC; vertical-align: middle; width: 1px;"> <div style="background: #CCFF66;">&gt;</div> </td>

Example

0
source

Remove width: 1px; from td and add display: inline-block to both div :

 .left{ display: inline-block; float: left; background: #FA0; font-size: 2em; line-height: 1.4em; } .right{ display: inline-block; float: right; background: #AF0; font-size: 1em; line-height: 2.8em; }

Here is the fiddle .

0
source

More articles:


All Articles