Jump to content

Archived

This topic is now archived and is closed to further replies.

extrovertive

Turning 2 rows/columns into CSS?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
[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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.