CODEWITHSUNDEEP
htmlcssposition
jens
jens

Reputation: 75

Centering variable number of divs inside a div container

I really need some help as this is driving me nuts!

I need to position x number of child divs (or spans if that helps) inside a parent div. The child divs needs to be centered.

I know the width of the child divs, lets say it's 100px. The width of the parent div is 700px.

Again, the number of child divs can vary from 1 to 7.

The child divs contain an image and a short text.

I've tried to illustrate my desired result in with my insane photoshop skills but being a new user I'm not allowed to upload an image.

Please see my illustration here: http://whiteboxstudio.dk/div%20positioning.jpg

I hope this is sufficient information for you awesome css hackers to help me.

Thanks!

Upvotes: 4

Views: 1815

Answers (3)

Seb Ashton
Seb Ashton

Reputation: 692

html

<div class="parent-div">
    <div></div>
    <div></div>
    <div></div>
</div>

this css should work:

.parent-div {
    text-align: center;
}

.parent-div div {
    border: green 1px solid;
    display: inline-block;
}

.parent-div div:first-of-type {
    border-color: blue;
}

.parent-div div:last-of-type {
    border-color: red;
}

to fix inline-block in IE 6/7 for your ie specific stylesheet

.parent-div div {
    zoom:1; /* gives layout */
    *display: inline; /* ie6/7 inline */
    _height: 30px; /* ie6 height - height of children */
}

Upvotes: 13

Hayden Thring
Hayden Thring

Reputation: 1820

one way: (but uses inline-block) http://jsfiddle.net/2uKWC/

<div id="parent">

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

</div>


#parent{
    height:100px;
    border:thin solid yellow;
    text-align:center;
}

.child{
    display:inline-block;
    border:thin solid blue;
    width:100px;
    height:100px;

}

Upvotes: 0

Yule
Yule

Reputation: 9774

Something like this? HTML:

<div id="container">
    <div id="padder">
    <span class="blue">
        Blue
    </span>
    <span class="green">
        Green
    </span>
    <span class="red">
        Red
    </span>
</div>
</div>

CSS:

#container{
   width: 500px;
   border: 1px solid #000000;
   text-align: center;
}
#padder{
      margin: 0 auto;
}
.blue{border: 1px solid #0000ff; }
.green{border: 1px solid #00ff00;}
.red{border: 1px solid #ff0000; }

Fiddle: http://jsfiddle.net/LU7Vp/

Upvotes: 2

Related Questions