Search code examples
cssxhtmlpositioning

make text bigger than containing box - css

Im trying to get a text to appear as though it is too big for the containing box that it is in.

It is a bit hard to describe so here is a picture i made.

alt text

I want to try to get around making images for them, but i could if its not possible with css.

I have a scenario setup with jsfiddle, even though there isnt any js involved. Its a useful tool :]

http://jsfiddle.net/Lv2EE/

I tried to do some fancy positioning where the <span> tag would be positioned under the <h4> but that didnt work because the H4 collapses when i did that.

any ideas?

Solution

  • Here's an alternative, using a container div to clip the child header element: http://jsfiddle.net/Lv2EE/3/

    HTML:

    <div class="clip"><h4>Sidebar</h4></div>

    CSS:

    h4 { 
position : relative; 
top : -30px; 
background-color : #345678; 
color : white; 
font-size : 4.5em; 
overflow : hidden; }

.clip { 
display : block; 
height : 30px; 
overflow : hidden; 
}

    This should work properly across browsers; I included the 'display : block' so it could work with <span> as well.