Clipping an element to only show the middle part?


Tags: html,css

Problem :

I'm using the Google Charts API which renders charts using an <iframe>, however there's an large amount of white space on both the bottom and top parts which I'd like to remove. I've been attempting to do this in a variety of ways (explained below), but can't seem to get it to work out how I want it to;

My HTML markup

<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200"     frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div

The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.

My CSS Styling

#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}

#chart-contents {
    margin-top: -45px;
}

#chart-nav {
    margin-top: 15px;
    padding: 0px 15px;
}

The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it's still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.

However, this doesn't seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.

So far I've tried;

  • Use of negative top, padding-top and margin-top properties.
  • Positioning of absolute and relative in conjunction with top.
  • Using the clip property in conjunction with a relative position.

I'm starting to think that this is something that perhaps isn't possible without further elements or javascript?

Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!

If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google's API use of AJAX, it's rather difficult.



Solution :

You could always place the previous element on top of your iframe so it looks like it's starting sooner than it actually is. This obviously works for an element coming after the iframe as well.

All you need to do to achieve this is to give the element position: relative.

Preview: http://jsfiddle.net/Wexcode/XyVGr/


    CSS Howto..

    How to make hover-active whole
  • , not just ?
  • How to organize user's shares to easily add comments to that particular post?

    website div won't stretch from left to right, how do you fix css?

    How granular are CSS rem units?

    How to make a responsive scrollbar?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to display thumbnail in dropdown CSS list along with other styling of text

    How to dynamically apply nested base languages in textarea?

    How to remove left and right margin on first and last div

    css how to make two div side by side

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How to select Bootstrap's collapsed menu button with CSS

    how to set zoom level using css

    How to fit a button to a hover box? And the button is not displaying properly?

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    Framework7->CSS: How to make tabs under popover scrollable

    How to get a css property of an externally styled element with javascript

    how can a media query detect a full-hd smartphone?

    How to css style flexible elements to match their parents

    How to make layout using css and divs?

    how to customize css ellipse for a text string [duplicate]

    How to make child elements from parent1 have a higher z-index than child elements from parent 2 (with same z-index as other parent)?

    How can I caption an image inside a paragraph

    ?

    How to toggle multiple images in jquery?

    How to have 2+ boxes slide down

    how to make two functionality in one button.CSS BOOTSTRAP

    Image, src, href in same span. How to locate? Webdriver, css locator

    How do I create a mobile version of Nav Bar [closed]

    How can i disable the bootstrap hover color for links

    How to remove/add jQueryUI CSS theme from specific element?