SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying in a line

    Say if i wanted to position 5 divs in a line, next to each other, would i use

    float: left;
    or
    display: inline;

    or some other method?

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would use float:left but it does depend on what you are doing and want to achieve.

    You could just absolutely place them there if you wanted as well.

    It all depends on what happens next.

    Paul

  3. #3
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remember if you use inline then you can't add widths or heights etc (unless in ie quirks mode).

    heres an example of all three methods.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .test1, .test2, .test3 {
    width:100px;
    height:100px;
    margin:10px;
    }
    .test1 {display:inline;background:red}
    .test2 {float:left;background:yellow}
    .test3 {position:absolute;background:green;top:220px;left:20px;}
    .t2 {left:130px}
    .t3 {left:240px}
    .t4 {left:350px}
    .t5 {left:460px}
    </style>
    </head>
    <body>
    <div class="test1">test1</div>
    <div class="test1">test1</div>
    <div class="test1">test1</div>
    <div class="test1">test1</div>
    <div class="test1">test1</div>
    <div class="test2">test2</div>
    <div class="test2">test2</div>
    <div class="test2">test2</div>
    <div class="test2">test2</div>
    <div class="test2">test2</div>
    <div class="test3">test3</div>
    <div class="test3 t2">test3</div>
    <div class="test3 t3">test3</div>
    <div class="test3 t4">test3</div>
    <div class="test3 t5">test3</div>
    </body>
    </html>
    Hope that helps.

    Paul

  5. #5
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DIV tags are a block level element not a inline element. As such you can not use "display:inline" for DIV tags. As others have said, you should use "float:left".
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As such you can not use "display:inline" for DIV tags.
    Actually you can use inline on block level elements as that is what it is designed for

    Otherwise what purpose could it serve (think about it).

    display:inline causes an element to generate an inline-level-box. Just as declaring display:block cause an element to display a block-level box.

    Both these techniques are now commonly used for producing horizontal menus. e.g. causing lists to display inline and causing anchors to be block level.

    Although this doesn't mean that the html rules can be ignored. (you can't nest a div inside a p by changing the display properties etc.)

    Hope that all makes sense

    Paul

  7. #7
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Remember if you use inline then you can't add widths or heights etc (unless in ie quirks mode).

    heres an example of all three methods.
    Thanks for that, Paul - very good illustrative example. May I appropriate it for teaching?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    May I appropriate it for teaching?
    Be my guest

    Paul

  9. #9
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have seen issues with some browsers when someone used "display:inline" instead of "float:left" with the DIV tag.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There will be issues because the element becomes inline and only certain properties work on inline elements.

    Its all valid css and my example above shows the effect etc.

    Hope that makes sense

    Paul

  11. #11
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a good example. I was just working some more on my images with captions centering dilemma, and someone had suggested trying to do it with an unordered list with display: inline, then centering the list.

  12. #12
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I saw happen when someone used the "display:inline" with the DIV tag is
    that on some browsers the div boxes showed up like this:
    [][][][][]

    While on other browsers they showed up like this:
    []
    []
    []
    []

    I was helping someone in the Amazon Associates forum on this issue and
    resolved it by having the individual switch from using "display:inline" with
    "float:left".
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    While on other browsers they showed up like this:
    Version 4 browsers don't support it at all so they would probably render it like you say. IE5 and 5.5 (and ie6 in quirks mode) will render it ok but will apply width and height settings which they shouldn't do. Therefore you need to make sure that only relevant properties are applied in the first place.

    AFAIK there is no difference in applying inline to a div tag as there is in applying it to any other block level tag. I wouldn't advocate using it for 5 divs in a row because of the reasons shown in my example above.

    However it is used (almost overused now) in the construction of horizontal menus which use ul.

    Paul


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
  •