CSS Overflow: Force one div to overflow

Question

Is it possible to let only a certain element overflow a parent div?

I'm hiding all the child divs from overflowing, but I need one of the children elements to overflow and float outside the limiting parent.

See http://sandbox.pixelcraftwebdesign.com/engineering and run some calculations with random numbers.

The little red number in the upper right-hand corner needs to float over and outside the output div.

Answer 1

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