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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS - Floating Div Question

    I need to have three boxes, each with headers that float to allow for varying content. I need each box to be 10 pixels from the one above/below it.

    My question is, what is the best way to include the spacing between the boxes?

    I know of servral methods to do it, but what I am trying to figure out is what the CSS standard method would be.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could do the following:

    (X)HTML
    Code:
    <div class="columnbox">text here blablabla</div>
    <div class="columnbox">text here blablabla</div>
    <div class="columnbox">text here blablabla</div>
    Or something along those lines.

    CSS:
    Code:
    .columnbox {
    float:left;
    clear:left;/*No floated elements must be left to the element*/
    background:#ccc;
    border:1px solid #999;
    padding:.5em;
    margin:5px 0 /*the right number, the zero, stands for left and right. It is a shorthand. */
    }
    But offcourse you could always have one div with an id attached, style that to be floated left, and just make nested boxes in that so you don't have to float them.

    There is an explorer bug with padding, in IE it strips up the text by 3 pixels: http://www.cssplay.co.uk/boxes/floatfix.html

    If you could give us a screenshot and link to what you are trying are making, I'm sure it is easier to find a decent and proper solution.
    Last edited by mrruben5; 08-18-2005 at 11:02 PM.
    CATdude about IE6: "All your box-model are belong to us"

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For discussions sake, simply using exactly the code you posted, my question is in this:

    <div class="columnbox">text here blablabla</div>
    HOW DO I PUT
    <div class="columnbox">text here blablabla</div>
    SPACES BETWEEN?
    <div class="columnbox">text here blablabla</div>

    Should that be done in the CSS somewhere (Obviously I can just stick a <br/> in thre, but I'm trying to make sure I'm following CSS standards).

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone know what the standard is on this?

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doesnt really matter, use what works I say. Your users arent really going to care if youve used the CSS standards or not

  • #6
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Do you want the spaces in the code or on the page? mrruben5's way has the space between the boxes being set by the top and bottom margin of the box in the CSS code. Change the first number of the margin and the space between boxes change. In my opinion, that is the best way to do it.

    In addition, I think you are doing the right thing to find out what the best standards-compliant way to do this is. I think you'll be happier in the long run when more browsers start to be more compliant.
    Last edited by Pepe, the bull; 08-22-2005 at 05:28 PM.
    Pepe, the bull


  •  

    Posting Permissions

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