Turning 2 rows/columns into CSS?

[extrovertive]

If you here

http://tutor.populateme.com/2b/

Under the navigation bar and betwee the "Resources" section is one big table. It holds two columns and two rows. Top-left = Find a tutor, top-right = Flash, bottom-left = newsletter, bottom-right = intro text.

Here's the code for the table with content removed:



[code]
/////content style
table.contenthome
{
background-color: #FFFFFF;
width: 730px;
margin-left:auto;
margin-right:auto;
border-right: 1px solid #003399;
border-left: 1px solid #003399;
}

///////

<table cellpadding="5" cellspacing="10" class="contenthome">
        <tr valign="top">
      <td width="411" valign="top">
<!-- Find A Tutor -->
</td>
    <td width="400" class="vertical">
<!-- Flash -->
</td></tr>

<tr valign="top">
          <td>
  <!-- Newsletter -->
</td>
<td>
<!-- Intro text -->
</td>
        </tr>
</table>
[/code]

I know basic CSS but in terms of making layouts such as the way I would use tables to make number columns and rows, I am bit confused.

[cmgmyr]

Check this link out: http://www.neuroticweb.com/recursos/2-columns-layout/index.php

there is also a 3 column here : http://www.neuroticweb.com/recursos/3-columns-layout/index.php

all you have to do is add <div style="clear:both;">&nbsp;</div> after your second "column" then this will be your second row.


Hope this helps,
-Chris

[obsidian]

[quote author=cmgmyr link=topic=103533.msg412391#msg412391 date=1155126592]
Check this link out: http://www.neuroticweb.com/recursos/2-columns-layout/index.php

there is also a 3 column here : http://www.neuroticweb.com/recursos/3-columns-layout/index.php

all you have to do is add <div style="clear:both;">&nbsp;</div> after your second "column" then this will be your second row.


Hope this helps,
-Chris
[/quote]

very good point, but i would encourage you to use this idea in leu of the clear: both option: in your top div that holds your first "row," simply apply the [url=http://www.positioniseverything.net/easyclearing]clearfix class[/url] from Position is Everything. this way, your top row clears everything below it by itself, and you can also view it properly in all browsers. other types of clearing can sometimes cause issues in cross-browser situations.

good luck