CODEWITHSUNDEEP
csshtml
Laurent D.
Laurent D.

Reputation: 480

overlapping and centering divs in html/css

In a html page, I would like to vertically center 2 small divs above a bigger one, like below:

+-----------div1-----------+
|                          |
|                          | 
| +-2-+              +-3-+ |
| |   |              |   | |
| +---+              +---+ |
|                          |
|                          |
+--------------------------+

div1 will contains an image of unknown size, so I can't use absolute positionning.

I have tried many combinations of css attributes, without success.

Any idea?

Upvotes: 0

Views: 98

Answers (5)

NoobEditor
NoobEditor

Reputation: 15881

i guess m late in answering...here is another solution DEMO

CSS

    .outer {
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    width: 400px;
    height: 500px;
    /**change this as per your need */
    padding: 20px;
    background-color: #DDD;
}
.div1 {
    background-color: #FFCCCC;
    padding: 10px;
}
.div2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
}
.div3 {
    background-color: #CCCCFF;
    padding: 20px;
}

HTML

 <div class="outer">
    <div class="defaultdiv div1">div on left
    </div>
    <div class="defaultdiv div2"></div>
    <div class="defaultdiv div3">div on right
    </div>
</div>

Upvotes: 0

Jop
Jop

Reputation: 456

If your inside div's (div2 and div3) have got a static width and height, you could use this solution:

HTML

<div id="wrapper">
    <img src="https://www.google.nl/images/srpr/logo11w.png" alt="text" />
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS

#wrapper{
    background-color: green;
    width: 100%;
    float: left;
    position: relative;
}
#left,
#right{
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    margin-top: -10px;
    background-color: red;
}
#left{
    left: 20px;
}
#right{   
    right: 20px;
}

JsFiddle: http://jsfiddle.net/aPJ8u/7/

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

@Laurent Use display:table and display:table-cell: http://jsfiddle.net/nLdU5/

Upvotes: 0

randak
randak

Reputation: 2001

The simplest way to do this without having to worry about the consequences of absolute positioning is to use floats. The method of vertical alignment I am proposing requires you to know the heights of the vertically aligned elements. If this is not possible, we can figure out another solution.

HTML

Simply place the elements inside of the wrapping div.

<div id="test1">
    <div id="test2"></div>
    <div id="test3"></div>
</div>

CSS

The width and height of #test1 do not need to be set. Neither do the background-colors.

#test1 {
    width: 500px;
    height: 500px;
    background-color: yellow;
}

#test2 {
    float: left;
}

#test3 {
    float: right;
}

#test2, #test3 {
    margin-top: calc(50% - 25px);    
    width: 50px;
    height: 50px;
    background-color: red;
}

JSFiddle

Upvotes: 0

Zword
Zword

Reputation: 6793

Try this:

http://jsfiddle.net/g8psN/2/

Addition for .main

display: table-cell;
vertical-align: middle;

Then float the child elements left and right.

Upvotes: 0

Related Questions