I want to do something like this in CSS:
<table width="100%">
<tr>
<td width="70%">24 oz US (710ml)
<table width="100%">
<tr>
<td width="50%">7 Eleven</td>
<td width="50%">Big brew</td>
</tr>
<tr>
<td width="50%">Fresh brewed</td>
<td width="50%">Fresh taste</td>
</tr>
</table>
</td>
<td width="30%">CAUTION HOT!<br>0 052120 2</td>
</tr>
</table>
I tried doing this, but it displays incorrectly:
<div style="float:left; width:70%;">
<div style="background-color:#cccccc; padding:5px;">
24 oz US (710ml)
<div style="float:left; width:50%;">
<ul>
<li>7 Eleven</li>
<li>Fresh brewed</li>
</ul>
</div>
<div style="float:left; width:50%;">
<ul>
<li>Big brew</li>
<li>Fresh taste</li>
</ul>
</div>
</div>
</div>
<div style="float:right; width:30%; background-color:#ffcc00;">CAUTION HOT!<br>0 052120 2</div>
Any suggestions? I don't want to use tables at all, but I'm still kinda new at CSS.the table and div cells are outlined in this picture....
<!-- m --><a class="postlink" href="http://www.buildingboom.com/beta/error.jpgI">http://www.buildingboom.com/beta/error.jpgI</a><!-- m --> guess you're going to have to clearly define "displays incorrectly" because they both look essentially the same to me.
<table width="100%">
<tr>
<td width="70%">24 oz US (710ml)
<table width="100%">
<tr>
<td width="50%">7 Eleven</td>
<td width="50%">Big brew</td>
</tr>
<tr>
<td width="50%">Fresh brewed</td>
<td width="50%">Fresh taste</td>
</tr>
</table>
</td>
<td width="30%">CAUTION HOT!<br>0 052120 2</td>
</tr>
</table>
I tried doing this, but it displays incorrectly:
<div style="float:left; width:70%;">
<div style="background-color:#cccccc; padding:5px;">
24 oz US (710ml)
<div style="float:left; width:50%;">
<ul>
<li>7 Eleven</li>
<li>Fresh brewed</li>
</ul>
</div>
<div style="float:left; width:50%;">
<ul>
<li>Big brew</li>
<li>Fresh taste</li>
</ul>
</div>
</div>
</div>
<div style="float:right; width:30%; background-color:#ffcc00;">CAUTION HOT!<br>0 052120 2</div>
Any suggestions? I don't want to use tables at all, but I'm still kinda new at CSS.the table and div cells are outlined in this picture....
<!-- m --><a class="postlink" href="http://www.buildingboom.com/beta/error.jpgI">http://www.buildingboom.com/beta/error.jpgI</a><!-- m --> guess you're going to have to clearly define "displays incorrectly" because they both look essentially the same to me.