CSS Overflow: Force one div to overflow

not entirely sure what you are after, but here is a fiddle demonstrating a certain child div floating outside and displaying all of its contents: http://jsfiddle.net/dcpDa/

<div id="parent">
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="doShow">Okay, Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
</div>

CSS:

div { 
    width: 5em; /*constrain div */
    height: 1em; 
    border: 1px solid #aaa; 
    background-color: #ccc;
}
.dontShow { overflow: hidden; } /* do not show overflow */

.doShow { 
    width: auto; /* over ride constraints and show all */
    height: auto;  
    position: absolute; /* break from flow */ 
    left: 15em; /* position where you want */
}

Here are two articles on CSS positioning I found usefull recently:
css Floats 101
Css Positioning 101

Tags:

Html

Css