ansaurus

Question

how to evenly space layers within a container layer

Answer 1

A:

I think the easiest way is:

<style>
#content {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
border:1px solid #000
}
#featured1 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 0px;
    margin-top: 10px;
    background-color: #09F;
}
#featured2 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
     margin-top: 10px;
    background-color: #09F;
}
</style>
</head>

<body>

<div id=content>
    <div id=featured1></div>
    <div id=featured2></div>
    <div id=featured2></div>
    <div id=featured2></div>
</div>

2009-11-26 09:56:14

Answer 2

A:

There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.

<div id="content">
    <div class="kludge">
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
    </div>
</div>

I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.

The CSS:

#content {
    width: 850px;
    margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
    overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
    width: 900px; /* create room for the right hand margin of last item */
    margin-right: -50px;
}
.featured {
    display: block; /* inline-block not necessary for floated elements */
    height: 100px;
    width: 200px;
    float: left;
    margin: 0 10px;
    background-color: #09F;
}

sanchothefat 2009-11-26 10:00:01

you may need to tweak the widths and margins still but this is just a demonstration of the technique

sanchothefat 2009-11-26 10:07:10

Answer 3

+2 A:

It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.

The following works, but I don't know how useful it is for you.

#content {
    width: 848px;
    margin-right: auto;
    margin-left: auto;
    background: #666;
    overflow: hidden;
}
#featured {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
    margin-top: 10px;
    background-color: #09F;
}
#featured.first { margin-left: 0px;}

<div id=content>
    <div id=featured class="first"></div>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
</div>

Steerpike 2009-11-26 10:01:27

This looks like the cleanest cross browser solution to me, the duplicated IDs are invalid though as mentioned, so should be something like: <div id="content"> <div class="featured first"></div> <div class="featured"></div> <div class="featured"></div> <div class="featured"></div> </div>

Will Prescott 2009-11-26 10:17:44

Answer 4

A:

Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):

CSS:

    #content {
   width: 848px;
   margin: 0 auto;
   overflow: auto;
 }
 .featured {
   height: 100px;
   width: 200px;
   float: left;
   margin-left: 16px;
   margin-top: 10px;
   background-color: #09F;
 }
 .featured:first-child {
   margin-left: 0;
 }

HTML:

<div id="content">
     <div class="featured"></div>
     <div class="featured"></div>
     <div class="featured"></div>
     <div class="featured"></div>
</div>

Will Prescott 2009-11-26 10:42:06

does it have to be class?

Patrick 2009-11-26 12:14:01

I would say yes. IDs will "work", but by accident rather than design, they should always be unique within the scope of a single HTML page. No big deal in the context of this example, but you might run into problems if for example you wanted to use JavaScript to add behaviour to the featured boxes. General rule of thumb:Use an ID where you want to target a single element uniquelyUse a class where you want to target a group of elements, as you're doing in this example

Will Prescott 2009-11-26 12:26:52

ansaurus

tags:

views:

answers:

how to evenly space layers within a container layer

related questions