CODEWITHSUNDEEP
htmlcss
brietsparks
brietsparks

Reputation: 5016

css - descendant child element clipped by parent element

In this WordPress site, I am trying to get the:

<section id="content">

the box with the main text

To overlap the top boundary of its parent 

<div id="container">

When I add top:-200px to the section's style, it gets clipped by the above picture. The only way to prevent the clipping is to edit the ancestor <div id="wrapper"> by removing from it: 

overflow-x: hidden

But this also removes the white background. I need no clipping+ yes background, but can only get clipping+background, or no clipping+no background.

Here is my site: http://biztest.netai.net

If logging into the site will help, I can send you the login info.

Upvotes: 0

Views: 1489

Answers (1)

DaniP
DaniP

Reputation: 38252

Hi you can follow that way:

  • Set top:-200px on the section.

  • Remove the overflow-x:hidden on the wrapper.

The problem cames here:

Why the white background is been removed?

Because you aren't using clear method after float the section then the container and the wrapper seems to have height:0. You can add this to your CSS after the previous modifications:

#container:after {
  content: " ";
  display: block;
  clear: both;
}

Screenshot after do that modifications with DeveloperTools:

enter image description here

Upvotes: 2

Related Questions