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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple question about div's

    Hi Everyone!

    I have a question about how to align some divs. Basically I want then to some divs to line up as columns, this is the code I use:

    Code:
    <div class="content-box">
    </div>
    <div class="content-box">
    </div>
    <div class="content-box">
    </div>
    <div class="content-box">
    </div>
    However it when a new div starts, it inserts a page break. I want them to line up next to each other.

    Here is the CSS code im using

    Code:
    .content-box {
    overflow: auto;
    color: #000000;
    margin: 10px;
    padding: 3px;
    width: 150px;
    height: 150px;
    }
    I cant figure out what I'm missing

    Thanks

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    You need to float the divs:

    Code:
    .content-box {
    overflow: auto;
    color: #000000;
    margin: 10px;
    padding: 3px;
    width: 150px;
    height: 150px;
    float: left;
    }
    If you have content following or preceding these divs, it might be best to create a "master" div and clear it on both sides.

    Code:
    HTML:
    <div id="master-box">
    
         <div class="content-box"></div>
         <div class="content-box"></div>
         <div class="content-box"></div>
         <div class="content-box"></div>
    
    </div>
    
    CSS:
    .content-box {
    overflow: auto;
    color: #000000;
    margin: 10px;
    padding: 3px;
    width: 150px;
    height: 150px;
    float: left;
    }
    
    #master-box {
    clear: both;
    }
    Hope this helps.

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow kaitco, thanks! it worked like a charm

    added rep


  •  

    Posting Permissions

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