Geek Answers Handbook

CSS overflow: force overflow of one div

Is it possible to allow only some overflow element of the parent div?

I hide all child divs from overflow, but I need one of the child elements to overflow and float outside the bounding parent.

See http://sandbox.pixelcraftwebdesign.com/engineering and do some random number calculations.

The small red number in the upper right corner should float above and outside the output div.

+5
source share
3 answers

Assuming you want the width to stay the same:

  • Remove overflow:hiddenfrom .output.
  • Set .output .rightto width:257px;overflow:hidden.
  • Set .result-rh, .result-tempto width:241px.

, . , SPAN.

Firefox 3.6.17. .

+1

, , , div, : 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 */
}

CSS, :
css Floats 101
Css Positioning 101

+3

position: absolute; , . top, left, height width, , .

0

More articles:


All Articles