www.webdeveloper.com
Results 1 to 3 of 3

Thread: margins vs <br/>

  1. #1
    Join Date
    Jan 2007
    Posts
    21

    margins vs <br/>

    Hi All

    Trying to convert table style stuff to css :

    old way

    <table>
    <tr>
    <td>
    <sometag></sometag>
    </td>
    </tr>
    <br/>
    </table>

    to new way

    <div id="newway" style="margin:15px">
    <sometag></sometag>
    </div>

    So in this example 'style="margin:15px" '
    takes the place of the line break <br/>.

    Now, I'm pretty sure that I have to worry about window resolution in doing this conversion properly so the question is:

    What is it that I have to do to convert properly/convert as closely as I can ?

    TIA

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Quote Originally Posted by jwstockwell View Post
    ...So in this example 'style="margin:15px" '
    takes the place of the line break <br/>...
    Doesn't quite work that way. The DIV tag does that. DIV tags are called block level elements because they take up a block of space and force what ever follows them to start on a new line. When you use margin on a DIV, it simply surrounds the DIV tag on top/bottom/right/left with 15px's worth of white space.

    Sort of the opposite of a block element is a inline element. An inline element such as the SPAN tag stays on the current line, allowing following elements to stay on it too.

    To get your DIV tag to layout like the table, simply use the same units as the table. ie if table is width="100%" then the DIV style="width:100%". I did a quick google and found a page that talks more about converting from table to div layouts:
    http://www.webmasterworld.com/forum83/8626.htm

    P.S.

    There's nothing wrong with using tables for tabular data, like reports, or data from a database. You just don't want to use tables to layout all elements on a page.

  3. #3
    Join Date
    Sep 2009
    Location
    USA
    Posts
    34
    Hi,

    Quickly to give you an idea of the difference...

    Your old HTML example appears to be incorrect as the break tag is between a closing tr and table and should either be inside the td or outside the table.

    In either case, let me quickly give you some example how one would compare to the other to answer your question.

    Code:
    <table>
    <tr>
    <td>
    <sometag></sometag>
    <br />
    </td>
    </tr>
    </table>
    would be similar in concept to (choose whatever amount of pixels you need):

    Code:
    <div style="padding-bottom: 8px"></div>
    On the other hand the following:


    Code:
    <table>
    <tr>
    <td>
    <sometag></sometag>
    </td>
    </tr>
    </table>
    <br />
    would be similar in concept to (choose whatever amount of pixels you need):

    Code:
    <div style="margin-bottom: 8px"></div>
    Hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles