SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist Alchemist's Avatar
    Join Date
    Aug 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using <br /> or css margins?

    Hello,

    let's say you wanted to increase space between divs. is it ok to use <br /> or should I increase divs margins through css?

    thanks

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never use breaks for that... definately use margins.

  3. #3
    SitePoint Evangelist Alchemist's Avatar
    Join Date
    Aug 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. then I was right in my impression. when is it ok to use breaks?

  4. #4
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ideally you'd never want to use breaks. There's always a better way of solving the problem using CSS.

  5. #5
    SitePoint Evangelist Alchemist's Avatar
    Join Date
    Aug 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. when I have two divs floated to the left, is it okay to use <br class="ca" /> where .ca { clear: all; } to break the flow?

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just put clear:left on the next div that follows the two that have been floated left?

  7. #7
    SitePoint Evangelist Alchemist's Avatar
    Join Date
    Aug 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cause that would be too easy no, when I have the following:

    Code:
    <div id="wrapper">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    </div>
    I have experienced strange browser behavior if I don't put <br class="ca" /> after the wrapper div

  8. #8
    SitePoint Evangelist Alchemist's Avatar
    Join Date
    Aug 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also, I have another weird issue

    Code:
    <div style="width: 30%;">Title1</div>
    <div style="width: 70%;">some text goes here</div>
    
    <div style="width: 30%;"></div>
    <div style="width: 70%;">some text goes here</div>
    if I leave the second 30% div empty, all browsers but IE will not show the correct width for that div. that is, the div is there but with no width.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alchemist View Post
    when is it ok to use breaks?
    When the break is semantic, i.e., affects the meaning of the content. Poetry, for instance, or song lyrics. Postal addresses, too.

    But never more than one <br>.
    Birnam wood is come to Dunsinane

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've used it for when I have a <p> and the design calls for more breaks than can semantically be done with <p> (I still end up with too many sentence fragments calling themselves a paragraph) such as when a short sentence fragment introduces some "points" (which are usually set in a ul). Sometimes you can get away with spans set to display: block but I find it goofy.

    The best rule of thumb I've come up with is when text MUST start on a new line in the middle of something, then I'll use br because it's part of the text. If I just need spacing, then margins and padding are used. As Tommy said, if you're using more than one, you're using it for spacing and not breaking a sentence line and should be using CSS margins instead. Also, if the br is the last thing in line, it shouldn't be there.

    None of this:
    Code:
    stuff, stuff stuff<br><--- okay
    stuff stuff stuff <br><---okay
    stuff stuff stuff<br > <---- this one is redundant and unnecessary.  Use bottom margins.

  11. #11
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you should use line breaks in the same manner and context that you'd use a shift-enter in Word.
    Hrvoje Markovic
    Croatiankid designs

  12. #12
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As Tommy said, BRs are only really designed to be used to make the content make sense.

    For instance "Roses are red Violets are blue Don't use breaks As a layout tool" doesn't make much sense to read. But breaking it into 4 paragraphs wouldn't work because they clearly aren't paragraphs either. Therefore, when we put breaks into it like this;

    Roses are red
    Violets are blue
    Don't use breaks
    As a layout tool


    ..our breaks are as much a part of the content as the words are. Song Lyrics, code or mathematical formulas might be other places where a break makes perfect sense.

    But a lot people still use them as a clearing or positioning device to help their current site layout work properly -- and that's to be avoided.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oooh, can I put that in my sig? It's so romantic... in a nerdy way. : )

  14. #14
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Oooh, can I put that in my sig? It's so romantic... in a nerdy way. : )


    Lol, yep, knock yourself out.

    I wasn't totally convinced about the 'blue-tool' rhyme, but the sentiment was enough to sell it.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable


Bookmarks

Posting Permissions

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