Question

I have this html configuration:

<div id="Header">
    <div id="Stamp">
        <img alt="Header Stamp" src="images/About-Us.png" />
    </div>
    <div id="Events">
        <div></div>
    </div>
    <div class="clear"></div>
</div>

and the following css applied:

#Stamp, #Events{
    width:50%;
    float:left;
    min-width:400px;
}

#Stamp img{
    display:block;
    margin: 0 auto;
}

#Events > div{
    border:1px solid pink; /* Debug just to see where it is */
    height:300px;
    width:400px;
    margin: 25px auto;
}

So there is a header div 100% in width containing 2 child divs equally 50% in width both floating left.

The elements inside are centred;

so when the browser is re-sized, the #stamp and #events obviously resize because they’re percentages, and their contents are centred.

they both have min widths so when the browser window is too small, they will wrap.

when they wrap… they; as expected; both float to the left of the parent container

My question is:

When the floats have wrapped. is there any way I can centre them? rather than having the floating left?

Im looking for a method without javascript.

If its impossible, then i spose ill have to go with javascript.

So is there a way to test whether floats have wrapped?

Any other solutions is encouraged 🙂

Thanks

Alex

Answer 1

You can use display:inline-block for this type of functionality. So, you have to write like this:

#Stamp, #Events{
    width:50%;
    display:inline-block;
    *display:inline;/* for IE*/
    *zoom:1;/*for IE*/
    min-width:400px;
    text-align:left;
}
#Header{
 text-align:center
}

Check this http://jsfiddle.net/7pSyB/