Previous Message
Next Message

Floats break containing div

Sent by Diona Kidd on 12 October 2005 15:03


Hi there. I think you need a block level element after #wrapper element. 
I use a couple of hacks to make this work well in different browsers. 
Give this a try.

<style>
#wrapper {
        border-left: 6px solid #FFCC33;
        border-right: 6px solid #FFCC33;
        background-color: #fff;
        border: solid 1px red;
}

/* hack for proper expansion of float wrapper */
#wrapper:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#wrapper {display: inline-table;}

/* Hides from IE-mac \*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */



#wrapper p {
        font-size: 9px;
        margin: 0;
        padding: 3px 10px;
        display: inline;
        float: left;
}
#wrapper p.test {
        text-align: right;
        float: right;
}
</style>

<div id="wrapper">
        <p>align left</p>
        <p class="test">align right</p>
</div>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: