#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    125
    Rep Power
    27

    Fitting horizontal divs in one row


    Hi,

    I always run into this problem and don't know the right way to get around it.

    I typically have a parent fixed width div and several child divs inside. I'd like them to align them into one row. So I typically, just divide the widths of the children equally to all fit into the parent div. This typically works but, if I then add a right/lift border the last child div moves to the second row.

    Is there a smarter way of doing this?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    borders are added onto the outside width of an item, so, if you have a div that is 300px wide and you then add a 1 px left and right border, you have now made that div 302px wide.
  4. #3
  5. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,102
    Rep Power
    1990
    A good way to do this so it's a bit more friendly then risking if things are one pixel out is to add an inner div tag, then style the outer tag for the full width, and apply any borders or spacing to the inner div. This keeps each area at the correct width, nothing overflows and you're able to set up any margins/padding/borders that you want without risking the layout.

    As an example...

    Code:
    <div class="outer_div"><div class="inner">Content goes in here</div></div>
    Code:
    .outer_div {
        width: 25%;  // Assuming 4 equal spaced items
        float: left;
    }
    .outer_div .inner {
        margin: 0 2px;
        border: 1px solid #000000;
        padding: 5px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo