Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lining up 5 DIVS next to each other - how?

    Hi

    I have five copies of the same div that I want to line up horizontally next to each other, with a 20px gap between.

    Does anyone have ninja CSS power and actually know how to do this?

    Cheers

    Shaun

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <div id="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div id="fifth">5</div>
        <div style="clear:both"></div>
    <div>
    Code:
    <style type="text/css">
    div#wrapper{
    width:800px;
    border:1px solid black;
    }
    div#wrapper div{
    float:left;
    width:120px;
    margin-right:20px;
    border:1px solid red;
    }
    div#wrapper #fifth{
    margin:0;
    }
    </style>
    (Haven't tested though)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    i do it this way, abdus is a nice way of doin it tho

    Code:
    div#wrapper{
    width:800px;
    border:1px solid black;
    }
    
    .box{
    float:left;
    display:inline;
    background-color:#009966;
    width:144px;
    margin:0 20px 0 0;
    }
    
    .boxEnd{
    float:left;
    display:inline;
    background-color:#009966;
    width:144px;
    margin:0;
    }
    Code:
    <div id="wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="boxEnd">5</div>
        <div style="clear:both"></div>
        
    <div>
    same result
    Last edited by maxvee8; 02-15-2008 at 02:59 AM.

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys

    I tried Abduraooft's way - it's here http://www.bigbadroo.com.au/delete.html

    It works, except that in IE, an extra two boxes are created - how do I get rid of them?

    Thanks

    Shaun

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You have some errors in your markup (missing closing tag for #wrapper)
    Try this...
    Code:
    <body>
    
    <div id="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div id="fifth">5</div>
        <br style="clear: both"/>
    </div>
    
    </body>
    (replaced the last div with br to get rid of an extra border:none; there!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys - I'm off to nominate you both now.
    Shaun

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Are you sure that a list might not be more appropriate?

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts


  •  

    Posting Permissions

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