CODEWITHSUNDEEP
csshtmlcenter
Bradley Mitchell
Bradley Mitchell

Reputation: 287

Center two containers with absolute position within a div

Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.

Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/

How would I achieve this without using specific widths?

HTML:

<button id="change">Change</button>
<div id="total-wrap">
    <div id="hello-wrap" class="bunch">
        <div id="box"> 
            <p> Hello, this is text1 </p>
        </div>
        <div id="box">
            <p> Hello, this is text2 </p>
        </div>
    </div>
    <div id="goodbye-wrap" class="bunch">
        <div id="box"> 
            <p> Goodbye, this is text1 </p>
        </div>
        <div id="box">
            <p> Goodbye, this is text2 </p>
        </div>
    </div>
</div>

CSS: 

#total-wrap {
    border:1px solid #000;
    height:500px;
}
#box {
    position:relative;
    display:inline-block;
    width:300px;
    height:100px;
    background-color:yellow;
    margin:10px;
}
.bunch {
    position: absolute;
    text-align:center;
}

Upvotes: 0

Views: 2192

Answers (5)

Kevin Lynch
Kevin Lynch

Reputation: 24723

I would do it with left:0; and right:0 as they are absolutely positioned.

DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/

.bunch {
    position: absolute;
    text-align:center;
    left:0;
    right:0;
}

Upvotes: 4

Rajender Joshi
Rajender Joshi

Reputation: 4205

If you want to use jQuery:

Demo

keepCentered = function() { 
    $('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
    $('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);

Upvotes: 0

Mat&#237;as C&#225;nepa
Mat&#237;as C&#225;nepa

Reputation: 5974

Is this what you want?

#box {
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    background-color:yellow;
    margin:10px;
}

DEMO: http://jsfiddle.net/p4sA3/11/

The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one

In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/

Upvotes: 0

argentum47
argentum47

Reputation: 2382

<div id="wrap">
    <div id="left">Box1</div>
    <div id="right">Box2</div>
</div>
#wrap {
    background: #e7e7e7;
    padding: 40px; 
    text-align: center;
    width: auto;  
}

#left, #right {
     background: yellow;
     display: inline-block;    
     padding: 20px;   
}

Upvotes: 0

Touhid Rahman
Touhid Rahman

Reputation: 2593

Solution:

        #total-wrap {
            border:1px solid #000;
            height:500px;
        }
        #box {
            display:inline-block;
            width:300px;
            height:100px;
            background-color:yellow;
            margin:10px;
            text-align:center;
        }
        .bunch {
            text-align:center;
        }

Upvotes: 0

Related Questions